updated listbox wrapper CSS

css/extensions.css

@@ -151,27 +151,27 @@ html table.ui-table thead th, html table.ui-table thead td {
 }
 /* font-size */
 html table.ui-table {
-  /* font-size: 90%; */
+  font-size: 90%; 
 }
 html div.ui-table-wrapper-top > *,
 html div.ui-table-wrapper-bottom > *,
 html div.ui-collapsible-set {
-  /* font-size: 100%; */
+   font-size: 100%;
 }
 @media (min-width: 40em) {
   html table.ui-table {
-    /* font-size: 80%; */
+     font-size: 80%; 
   }
   html div.ui-collapsible-set table.ui-table {
-   /* font-size: 90%; */
+   font-size: 90%;
   }
   html div.ui-table-wrapper-top > *,
   html div.ui-table-wrapper-bottom > *,
   html div.ui-collapsible-set {
-  /* font-size: 90%;*/
+   font-size: 90%;
   }
   html table thead th a.ui-btn {
-    /* font-size: 100%; */
+     font-size: 100%;
   }
 }
 /* shrink icon font-size (should not be set here...) */
@@ -290,19 +290,19 @@ html table tr td .ui-checkbox {
   -webkit-border-bottom-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-/* first grid and button get top left */
+/* first grid and contained buttons get top left */
 .ui-table-wrapper-top.ui-table-wrapper-inset > div:first-child,
-.ui-table-wrapper-top.ui-table-wrapper-inset > div:first-child .ui-btn,
-.ui-table-wrapper-top.ui-table-wrapper-inset > div:first-child .ui-select {
+.ui-table-wrapper-top.ui-table-wrapper-inset > div:first-child > div > div > .ui-btn,
+.ui-table-wrapper-top.ui-table-wrapper-inset > div:first-child > div > div > .ui-select {
   border-radius: inherit;
   -webkit-border-radius: inherit;
   border-top-right-radius: 0;
   -webkit-border-top-right-radius: 0;
 }
-/* last grid and button get top right */
+/* last grid and contained button get top right */
 .ui-table-wrapper-top.ui-table-wrapper-inset > div:last-child,
-.ui-table-wrapper-top.ui-table-wrapper-inset > div:last-child .ui-btn,
-.ui-table-wrapper-top.ui-table-wrapper-inset > div:last-child .ui-select {
+.ui-table-wrapper-top.ui-table-wrapper-inset > div:last-child > div > div > .ui-btn,
+.ui-table-wrapper-top.ui-table-wrapper-inset > div:last-child > div > div > .ui-select {
   border-radius: 0;
   -webkit-border-radius: 0;
   border-top-right-radius: inherit;
@@ -317,18 +317,18 @@ html table tr td .ui-checkbox {
   border-top-left-radius: 0;
 }
 /* first grid and button get bottom left */
-.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:first-child:not(.ui-controlgroup-controls),
-.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:first-child:not(.ui-controlgroup-controls) .ui-btn,
-.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:first-child:not(.ui-controlgroup-controls) .ui-select {
+.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:first-child,
+.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:first-child > div > div > .ui-btn,
+.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:first-child > div > div > .ui-select {
   border-radius: inherit;
   -webkit-border-radius: inherit;
   border-bottom-right-radius: 0;
   -webkit-border-bottom-right-radius: 0;
 }
 /* last grid and button get bottom right */
-.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:last-child:not(.ui-controlgroup-controls),
-.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:last-child:not(.ui-controlgroup-controls) .ui-btn ,
-.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:last-child:not(.ui-controlgroup-controls) .ui-select {
+.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:last-child,
+.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:last-child > div > div > .ui-btn,
+.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:last-child > div > div > .ui-select {
   border-radius: 0;
   -webkit-border-radius: 0;
   border-bottom-right-radius: inherit;
@@ -342,6 +342,30 @@ html table tr td .ui-checkbox {
   border-radius: 0;
   -webkit-border-radius: 0;
 }
+/* buttons inside wrapper input/controlgroups*/
+.ui-table-wrapper .ui-input-search .ui-input-clear,
+.ui-table-wrapper .ui-input-search .ui-input-action,
+.ui-table-wrapper .ui-input-search .ui-input-clear:focus,
+.ui-table-wrapper .ui-input-search .ui-input-action:focus {
+  background-color: transparent;
+  background-image: none !important;
+  top: 50%;
+  height: 100%;
+}
+.ui-table-wrapper .ui-input-search .ui-input-clear:after,
+.ui-table-wrapper .ui-input-search .ui-input-action:after,
+.ui-table-wrapper .ui-input-search .ui-input-clear:focus:after,
+.ui-table-wrapper .ui-input-search .ui-input-action:focus:after {
+  margin-top: -10px !important;
+}
+.ui-table-wrapper.ui-table-wrapper-inset .ui-input-search a {
+  border-radius: 0 none;
+  -webkit-border-radius: 0 none;
+}
+.ui-table-wrapper.ui-table-wrapper-inset .ui-input-search a:last-child {
+  -webkit-border-top-right-radius: inherit;
+  border-top-right-radius: inherit;
+}
 /* table wrappers */
 .ui-table-wrapper-top, .ui-table-wrapper-bottom {
   min-height: 25px;
@@ -352,9 +376,9 @@ html table tr td .ui-checkbox {
   box-shadow: none /* iOS3 */ !important;
 }
 .ui-table-wrapper-top div > .ui-select,
-.ui-table-wrapper-top div > .ui-btn,
+.ui-table-wrapper-top div > .ui-btn:not(.ui-input-clear, .ui-input-action),
 .ui-table-wrapper-bottom div > .ui-select,
-.ui-table-wrapper-bottom div > .ui-btn {
+.ui-table-wrapper-bottom div > .ui-btn:not(.ui-input-clear, .ui-input-action) {
   width: auto;
   margin: 0;
 }
@@ -371,8 +395,8 @@ html table tr td .ui-checkbox {
   border: 1px solid;
 }
 /* wrapper buttons */
-.ui-table-wrapper-top:not(.ui-grid) .ui-btn:not(.ui-input-clear),
-.ui-table-wrapper-bottom:not(.ui-grid) .ui-btn:not(.ui-input-clear)  {
+.ui-table-wrapper-top:not(.ui-grid) .ui-btn:not(.ui-input-clear):not(.ui-input-action),
+.ui-table-wrapper-bottom:not(.ui-grid) .ui-btn:not(.ui-input-clear):not(.ui-input-action) {
   margin: 0;
   border: 0 none;
   -moz-border-radius: 0;
@@ -418,11 +442,19 @@ html table tr td .ui-checkbox {
   text-align: center;
   margin: 0 !important;
 }
-.ui-table-wrapper-top .ui-controlgroup > *,
-.ui-table-wrapper-bottom .ui-controlgroup > * {
+
+.ui-table-wrapper .ui-controlgroup .ui-controlgroup-controls > .ui-btn {
+  height: auto;
+  margin: 0 !important;
+  max-height: 2em;
+  padding: 0.45em 1em;
+}
+.ui-table-wrapper .ui-controlgroup .ui-controlgroup-controls .ui-btn,
+.ui-table-wrapper .ui-controlgroup .ui-controlgroup-controls .ui-select {
   border: 0 none;
   margin: 0 !important;
 }
+
 .ui-table-wrapper-top .ui-controlgroup .ui-controlgroup-controls ,
 .ui-table-wrapper-bottom .ui-controlgroup .ui-controlgroup-controls {
   /* width: 100%; *//* in single block, this prevents centering */

css/themes.css

@@ -914,6 +914,14 @@ html head + body .ui-body-slapos-black.ui-focus{
 .content_element .ui-input-search {
   width: 50%;
 }
+.content_element .ui-table-wrapper .ui-input-search {
+  width: auto;
+  margin: 0;
+  box-shadow: none;
+  -webkit-box-shadow: none;
+  border-width: 0;
+  border-bottom-width: 1px;
+}
 @media (max-width: 45em) {
   .content_element .ui-input-search {
     width: 60%;