[FIX] improvements to modal windows (web client)

problem is that they sometimes collapse to a single line, making it
difficult to operate the search view. Other problem is that content is
not displayed sometimes (when sub view manager).  Other problem is that
it does not have a scrollbar.  Sidenote: modals will be properly
reworked soon (tm).

3 files changed, 36 insertions, 23 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 579c7a61d26..c556fbcce0e 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1156,10 +1156,6 @@
 .openerp .oe_popup_list_pager {
   float: right;
 }
-.openerp .oe_popup_search {
-  width: 50%;
-  float: right;
-}
 .openerp .oe_searchview {
   cursor: text;
   position: relative;
@@ -3049,6 +3045,7 @@ body.oe_single_form .oe_single_form_container {
 }
 .modal .modal-body {
   overflow-x: auto;
+  min-height: 200px;
 }
 .modal .modal-footer {
   text-align: left;
@@ -3059,7 +3056,18 @@ body.oe_single_form .oe_single_form_container {
 .modal .oe_act_window.modal-body {
   padding: 0;
 }
+.modal .oe-modal-header {
+  background-color: #f0eeee;
+}
+.modal .oe-view-manager-content > div {
+  position: static !important;
+}
 
+@media (min-width: 768px) {
+  .modal .modal-body {
+    max-height: calc(100vh - 200px);
+  }
+}
 .ui-datepicker {
   z-index: 1500 !important;
 }
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 8a02cf43bc9..cc2a9eacfd7 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -998,9 +998,6 @@ $sheet-padding: 16px
         // End of customize
     .oe_popup_list_pager
         float: right
-    .oe_popup_search
-        width: 50%
-        float: right
     // }}}
     // SearchView {{{
     .oe_searchview
@@ -2515,12 +2512,21 @@ body.oe_single_form
         font-size: 20px
     .modal-body
         overflow-x: auto
+        min-height: 200px
     .modal-footer
         text-align: left
     .oe_button
         margin: 0 4px 0 0
     .oe_act_window.modal-body
         padding: 0
+    .oe-modal-header
+        background-color: #f0eeee
+    .oe-view-manager-content > div
+        position: static !important
+
+@media (min-width: 768px)
+    .modal .modal-body
+        max-height: calc(100vh - 200px)
 
 .ui-datepicker
     z-index: 1500 !important
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 660d17943c3..51c51a74e23 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1480,22 +1480,21 @@
 </t>
 
 <t t-name="AbstractFormPopup.render">
-    <div>
-        <table style="width:100%">
-            <tr style="width:100%">
-                <td style="width:100%">
-                    <div class="oe-search-options btn-group"/>
-                    <div class="oe_popup_search"></div>
-                    <div class="oe_popup_list_pager"></div>
-                </td>
-            </tr>
-            <tr style="width:100%">
-                <td style="width:100%">
-                    <div class="oe_popup_list" style="width:100%"></div>
-                </td>
-            </tr>
-        </table>
-        <div class="oe_popup_form" style="width:100%"></div>
+    <div class="container-fluid">
+        <div class="row oe-modal-header">
+            <div class="col-md-8 col-md-offset-4 oe_popup_search">
+            </div>
+        </div>
+        <div class="row oe-modal-header">
+            <div class="col-md-8 col-md-offset-4">
+                <div class="oe-search-options btn-group"/>
+                <div class="oe_popup_list_pager"/>
+            </div>
+        </div>
+        <div class="row">
+            <div class="oe_popup_list"/>
+        </div>
+        <div class="row oe_popup_form"></div>
     </div>
 </t>
 <t t-name="SelectCreatePopup.search.buttons">