From 2b81636e39e503c632bfa0e361edb290797e5106 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Tue, 28 Mar 2017 15:31:19 +0200 Subject: [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 --- addons/web/static/src/js/widgets/data_export.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) (limited to 'addons/web/static/src/js/widgets/data_export.js') 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 = $('', {type: 'radio', value: format.tag, name: 'o_export_format_name'}); var $label = $('