css: add custom legend inside form

css/themes.css

@@ -884,18 +884,23 @@ html .ui-header .ui-subheader {
   .ui-fieldcontain div.ui-controlgroup,
   .ui-fieldcontain div.ui-input-text,
   .ui-fieldcontain div.ui-input-search,
-  .ui-fieldcontain div.ui-select {
+  .ui-fieldcontain div.ui-select,
+  .ui-fieldcontain legend,
+  .ui-fieldcontain ul.ui-listview {
     display: inline-block;
     vertical-align: middle;
   }
   .ui-fieldcontain div.ui-controlgroup-label,
-  .ui-fieldcontain div.ui-controlgroup {
+  .ui-fieldcontain div.ui-controlgroup,
+  .ui-fieldcontain legend {
     vertical-align: top;
     padding-top: .5em;
     padding-bottom: .5em;
   }
   .ui-fieldcontain label:not(.ui-btn),
-  .ui-fieldcontain div.ui-controlgroup-label {
+  .ui-fieldcontain div.ui-controlgroup-label,
+  /* NOTE: this is for custom made legends used with listview inside forms! */
+  .ui-fieldcontain > legend {
     /* width: 46% *//*40% not working either*/
     max-width: 30%;
     min-width: 30%;
@@ -907,7 +912,8 @@ html .ui-header .ui-subheader {
   .ui-fieldcontain div.ui-select {
     width: 46%;
   }
-  .ui-fieldcontain div.ui-controlgroup {
+  .ui-fieldcontain div.ui-controlgroup,
+  .ui-fieldcontain ul.ui-listview {
     width: 57%;
   }
   .ui-fieldcontain div.ui-select .ui-btn {
@@ -951,6 +957,7 @@ html div.ui-page div.ui-content .ui-content-element {
   margin: 1em auto;
   text-align: center;
 }
+/* TODO: remove this!!! */
 html div.ui-page div.ui-content .ui-content-element > .ui-btn {
   max-width: 10%;
   margin: 1em auto 0;