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/less/data_export.less | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'addons/web/static/src/less/data_export.less') 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); } -- cgit v1.2.3