[FIX] web: fix export dialog design on IE

As the export dialog has always lots of content, the design was made
so that it always takes 100% of the viewport height. This allowed to
design the dialog content so that the fields panels do not overflow
the modal and are individually scrollable and so that the buttons are
vertically centered.

The problem is that this was not properly working on IE. Indeed, the
`.modal-body` element overflowed the `.modal-content` one. The solution
is in two parts:

 1) IE does not properly distribute heights when combining flex elements
    with max-height containers. The `.modal-content` has to be forced
    to `height: 100%;` for this to work. This is done in javascript as
    there is no way to detect `.modal-content` elements specific to
    export dialogs.

 2) IE does not properly render `flex: 1 0 0;` elements. The rule is
    supposed to tell the browser "render the element as if it was of
    dimension 0 and was able to grow to fill its parent container".
    Fortunatly, a workaround with `flex: 1 1 auto;` combined with
    `min-height: 0;` seems to achieve the same behavior for this
    case (by telling "render the element by shrinking or growing
    it to fill its parent container, without caring of its minimum
    size").

opw-725391

Cherry-pick of odoo/enterprise@dd059f0af79df24121d94cd81f2dd023c180583c

2 files changed, 17 insertions, 9 deletions

diff --git a/addons/web/static/src/js/widgets/data_export.js b/addons/web/static/src/js/widgets/data_export.js
index 8b07fd1f632..aac167d7f87 100644
--- a/addons/web/static/src/js/widgets/data_export.js
+++ b/addons/web/static/src/js/widgets/data_export.js
@@ -207,9 +207,15 @@ var DataExport = Dialog.extend({
         this.records = {};
         this.dataset = dataset;
         this.exports = new data.DataSetSearch(this, 'ir.exports', this.dataset.get_context());
-        
+
         this.row_index = 0;
         this.row_index_level = 0;
+
+        // The default for the ".modal_content" element is "max-height: 100%;"
+        // but we want it to always expand to "height: 100%;" for this modal.
+        // This can be achieved thanks to LESS modification without touching
+        // the ".modal-content" rules... but not with Internet explorer (11).
+        this.$modal.find(".modal-content").css("height", "100%");
     },
     start: function() {
         var self = this;
@@ -252,7 +258,7 @@ var DataExport = Dialog.extend({
 
         function do_setup_export_formats(formats) {
             var $fmts = self.$('.o_export_format');
-            
+
             _.each(formats, function(format, i) {
                 var $radio = $('<input/>', {type: 'radio', value: format.tag, name: 'o_export_format_name'});
                 var $label = $('<label/>', {html: format.label});
@@ -348,7 +354,7 @@ var DataExport = Dialog.extend({
     },
     on_show_data: function(records, expansion) {
         var self = this;
-    
+
         if(expansion) {
             this.$('.o_export_tree_item[data-id="' + expansion + '"]')
                 .addClass('open')
diff --git a/addons/web/static/src/less/data_export.less b/addons/web/static/src/less/data_export.less
index 3f596bea27d..01a1da80134 100644
--- a/addons/web/static/src/less/data_export.less
+++ b/addons/web/static/src/less/data_export.less
@@ -1,8 +1,8 @@
 .o_web_client .o_export {
-
-    .o-flex(0, 1, 1000px);
+    .o-flex(1, 1, auto);
     .o-flex-display();
     .o-flex-flow(column, nowrap);
+    min-height: 0;
 
     > p, > .row {
         .o-flex(0, 0, auto);
@@ -28,8 +28,9 @@
     }
 
     .o_export_panel {
-        .o-flex(1, 0, 0);
+        .o-flex(1, 1, auto);
         position: relative;
+        min-height: 0;
 
         > div {
             height: 100%;
@@ -59,9 +60,10 @@
             .o_left_field_panel, .o_fields_list {
                 border: 1px solid @odoo-brand-lightsecondary;
                 overflow: auto;
-                .o-flex(1, 0, 0);
+                .o-flex(1, 1, auto);
+                min-height: 0;
             }
-            
+
             .o_export_tree_item {
                 cursor: pointer;
                 position: relative;
@@ -72,7 +74,7 @@
                     background-color: @odoo-brand-primary;
                     color: white;
                 }
-           
+
                 .o_expand_parent {
                     .o-position-absolute(@top: 4px, @left: 5px);
                 }