PartPicker styling: Höhe in chrome

Für später: lx-office-erp.css überschreibt natives <input> styling mit
einem pseudo-windows 7 Look, und kann das svg deshalb einfach als
Hintergrundbild setzen.

kivitendo.css belässt es aber bei nativer appearance. Sobald man da dann
versucht das Hintergrundbild zu ändern, wird die nicht mehr vom Window
Toolkit gerendert, sonderm vom Browser mit dessen Standardstylesheet.
Ergo muss da die Lupe als inline-block über dem input Feld positioniert
werden.

Der gesamte Picker muss sich inline verhalten, die einzelnen Teile
darin aber mit spacing Informationen gestyled werden. Dafür ist display:
inline-block da. Blöderweise klappt vertical alignment innerhalb eines
inline-blocks nur wenn man ein leeresa Pseudoelement vorne vor setzt.

diff --git a/css/kivitendo/main.css b/css/kivitendo/main.css
index 06afe14..c11529a 100644 (file)
--- a/css/kivitendo/main.css
+++ b/css/kivitendo/main.css
@@ -392,6 +392,12 @@ label {
 }
 
 .part_picker {
+  display: inline-block;
+}
+.part_picker:before {
+  display: inline-block;
+  vertical-align: middle;
+  height: 100%;
 }
 .chart_picker {
   padding-right: 16px;
@@ -430,11 +436,11 @@ div.ppp_block {
   width: 350px;
 }
 span.ppp_popup_button {
-  position: absolute;
+  display: inline-block;
+  vertical-align: middle;
   margin-left: -24px;
-  margin-top: 5px;
-  width: 20px;
   height: 20px;
+  width: 20px;
   cursor: pointer;
   background: url("../../image/search.svg") no-repeat center right;
   background-size: contain;