select {
-moz-appearance: none;
+ -webkit-appearance: none;
+ -o-appearance: none;
appearance : none;
background: white url('../../image/select-down.png') no-repeat scroll right center;
padding: 0 14px 0 0;
}
.part_picker {
- padding-right: 16px;
}
.chart_picker {
padding-right: 16px;
float:left;
width: 350px;
}
+span.ppp_popup_button {
+ display: inline-block;
+ position: relative;
+ margin-left: -18px;
+ margin-top: 3px;
+ height: 16px;
+ width: 16px;
+ cursor: pointer;
+}
+
+td span.ppp_popup_button,
+th span.ppp_popup_button {
+ height: 9px;
+ width: 9px;
+ margin-left: -13px;
+}
+span.part_picker input {
+ padding-right: 20px;
+ background: white url("../../image/search.svg") no-repeat center right;
+ background-size: contain;
+ box-sizing: padding-box;
+ -moz-box-sizing: padding-box;
+ -webkit-box-sizing: padding-box;
+}
+
+td span.part_picker input,
+th span.part_picker input {
+ padding-right: 15px;
+}
+
+span.part_picker {
+ /* white-space: nowrap;*/
+}
+
div.ppp_block span.ppp_block_number,
div.cpc_block span.cpc_block_number
{
background-color:#FF0000;
border:none;
}
+
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="1000px" height="1000px" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid meet" zoomAndPan="disable" >
+ <rect id="svgEditorBackground" x="0" y="0" width="1000" height="1000" style="fill: none; stroke: none;"/>
+ <circle id="e2_circle" cx="600" cy="400" style="stroke-width: 30px; vector-effect: non-scaling-stroke;" stroke="grey" r="250" fill="grey"/>
+ <circle id="e3_circle" cx="600" cy="400" style="stroke-width: 30px; vector-effect: non-scaling-stroke;" stroke="lightgrey" r="190" fill="white"/>
+ <rect x="-250" y="475" style="stroke-width: 1px; vector-effect: non-scaling-stroke;" stroke="black" id="e4_rectangle" width="200" height="50" fill="grey" transform="matrix(1, -1, 1, 1, 0, 0)"/>
+ </svg>
});
// now add a picker div after the original input
- var pcont = $('<span>').addClass('position-absolute');
- var picker = $('<div>');
- $dummy.after(pcont);
- pcont.append(picker);
- picker.addClass('icon16 search').click(open_dialog);
+ var popup_button = $('<span>').addClass('ppp_popup_button');
+ $dummy.after(popup_button);
+ popup_button.click(open_dialog);
var pp = {
real: function() { return $real },
[% USE L %]
-<h1>Waren Picker Testpage</h1>
+<h1>Part Picker Testpage</h1>
<br>
Alle: <br>
[% L.part_picker('part_id3', undef, type='service') %]<br>
Waren und Dienstleistungen: <br>
[% L.part_picker('part_id4', undef, type='part,service') %]<br>
-
Pre-filled:<br>
-[% L.part_picker('part_id', pre_filled_part) %]<br>
+[% L.part_picker('part_id5', pre_filled_part) %]<br>
+
+<h2>Styling</h2>
+
+Ina span:
+<span>Leading text: [% L.part_picker('p1', undef, type='part,service') %] and text after with spacing</span><br>
+<span>Leading text:[% L.part_picker('p2', undef, type='part,service') %]and text after without spacing</span><br>
+<div>Leading text: [% L.part_picker('p3', undef, type='part,service') %] and text after with spacing with div</div><br>
+<div>Leading text:[% L.part_picker('p4', undef, type='part,service') %]and text after with spacing with div</div><br>
+
+<span>Picker + input next to each other: [% L.part_picker('p5', undef, type='part,service', width="100%") %]<input type=text></span>
+
+<div>[% L.part_picker('p6', undef, type='part,service', style="width:500px") %] 500px width</div>
+<div>[% L.part_picker('p7', undef, type='part,service', style="width:200px") %] 200px width</div>
+<div>[% L.part_picker('p8', undef, type='part,service', style="height:40px") %] 40px height</div>
[%# FOREACH i IN 1..50 %]
[%# L.part_picker('part_id_' _ i) %] <br>
[%# END %]
+
+<h2>In tables</h2>
+
+<p>No classes:</p>
+
+<table>
+ <tr>
+ <th>Part picker in table heading</th>
+ <th>[% L.part_picker('p9', undef, type='part,service') %]</th>
+ </tr>
+ <tr>
+ <td>Part picker in table cell</td>
+ <td>[% L.part_picker('p10', undef, type='part,service') %]</td>
+ </tr>
+</table>
+
+<p>With classes:</p>
+
+<table>
+ <tr class=listheading>
+ <th>Part picker in table heading</th>
+ <th>[% L.part_picker('p11', undef, type='part,service') %]</th>
+ </tr>
+ <tr class=listrow>
+ <td>Part picker in table cell</td>
+ <td>[% L.part_picker('p12', undef, type='part,service') %]</td>
+ </tr>
+</table>