[FIX] portal: odd sidebar on IE11 #32484

Julien00859 · 2019-04-08T09:24:51Z

Open a quotation from the portal using IE11. The sidebar is rendered as
it did not have any width.

What we are trying to achieve on large screens is to create a sidebar
with a fix width the size of its children and to let the rest of the
content (right to the sidebar) expands. On small screens we want to
invert the direction from left-to-right to up-to-bottom.

The classes col-12, col-lg and flex-lg-grow-0 are used to fulfill
that purpose.

The problem is due to the rule flex-grow: 0 !important applied by the
selector .flex-lg-grow-0 on the sidebar. On Chrome/Firefox the dom
element takes the width of his children as minimal width, the
flex-grow: 0 does not shrink the element bellow that minimal width.
IE11 does not set a minimal width based on the child elements of the
node, the width is equal to 0 and the flex-grow: 0 forbid it from
growing.

The solution is to replace the said classes by the col-lg-auto class
that does exactly what we want and is cross-browser.

opw-1944188
opw-1935087

stefanorigano · 2019-04-08T11:07:37Z

addons/portal/static/src/scss/portal.scss

@@ -182,6 +182,12 @@ hr {
    background-color: inherit;
 }

+// IE 11 hack
+// http://browserhacks.com/#hack-d19e53a0fdfba5ec0f283ae86175a3af
+*::-ms-backdrop, :root, .flex-lg-grow-0 {


@Julien00859 , I think that this selector it's too much generic.
It will affects all the .flex-lg-grow-0 elements, even outside portal (the file is included in the frontend bundle). I suggest to restrict to the sidebar only.

stefanorigano · 2019-04-08T13:41:45Z

addons/portal/static/src/scss/portal.scss

@@ -182,6 +182,12 @@ hr {
    background-color: inherit;
 }

+// IE 11 hack
+// http://browserhacks.com/#hack-d19e53a0fdfba5ec0f283ae86175a3af
+*::-ms-backdrop, :root, .o_portal_sale_sidebar .flex-lg-grow-0 {


Better, but since the fix it's really specific (252px), I'd prefer to affect the element only (adding a class maybe?).

Did you already checked if it's ok on Edge?

Work fine on Edge.

Is a new class really neede ? The only elements in odoo using the .o_portal_sale_sidebar class are the sidebars affected by the bug.

What about using a real solution like fixing the template ? col-lg flex-lg-grow-0 makes no sense, it says "hey take the space required to fill the remaining space starting from 0 width but hey... you cannot grow !" ... using col-lg-auto seems to be what was wanted here and would probably work on IE11.

The only elements in odoo using the .o_portal_sale_sidebar class are the sidebars affected by the bug.

I'm not a big fan of specific rules targeting framework classes 😕 (more down).
Website team ? @seb-odoo , @kea14
(@qsm-odoo is in holiday)

If we add (or xpath) a new element with .flex-lg-grow-0 class, it will be affected too. It's not an issue at the moment, but it will complicate things in the future.

Eg. "Client complain some elements are too big"
[...].o_portal_sale_sidebar .flex-lg-grow-0:not(btn):not(div:first-child()):not(.bg-beta) 😢

Moreover, it's probably the sidebar that should have the o_portal_sale_sidebar class (rather than the main container).
I suggest to review how classes are assigned here (solving the double classes assignment you showed me too) and then apply the fix on the right element only.

And I am not on holiday, I am actually dying in India.

And I am not on holiday, I am actually dying in India.

I can feel the same heat. 😓

qsm-odoo · 2019-04-09T07:58:42Z

addons/portal/static/src/scss/portal.scss

@@ -182,6 +182,12 @@ hr {
    background-color: inherit;
 }

+// IE 11 hack
+// http://browserhacks.com/#hack-d19e53a0fdfba5ec0f283ae86175a3af
+*::-ms-backdrop, :root, .o_portal_sale_sidebar .flex-lg-grow-0 {


What about using a real solution like fixing the template ? col-lg flex-lg-grow-0 makes no sense, it says "hey take the space required to fill the remaining space starting from 0 width but hey... you cannot grow !" ... using col-lg-auto seems to be what was wanted here and would probably work on IE11.

Julien00859 · 2019-04-09T11:52:21Z

Fixing the template definitely seems the nice choice here. I wasn't aware of that bootstrap class, let me try...

Julien00859 · 2019-04-09T11:58:29Z

@stefanorigano the double classes are due to the #{classes} here

odoo/addons/portal/views/portal_templates.xml

Line 177 in 8f4b98e

the variable expands to col-12 col-lg flex-lg-grow-0 d-print-none

Julien00859 · 2019-04-09T12:26:51Z

Last commit (col-lg-auto) tested and working against all browsers (IE/Edge/FF/Ch) on large and small screen.

Edit: related PR on enterprise: https://github.com/odoo/enterprise/pull/4057

stefanorigano · 2019-04-09T12:38:56Z

and as always, @qsm-odoo saved the day 👍

qsm-odoo · 2019-04-10T09:18:51Z

I see col-lg flex-lg-grow-0 in enterprise too, is there a related PR ?

Julien00859 · 2019-04-10T09:31:11Z

I see col-lg flex-lg-grow-0 in enterprise too, is there a related PR ?

https://github.com/odoo/enterprise/pull/4057

Julien00859 · 2019-04-11T07:26:07Z

@qsm-odoo if it is ok for you, can you r+ ?

qsm-odoo · 2019-04-11T07:33:20Z

@robodoo r+

qsm-odoo · 2019-04-11T07:34:58Z

@robodoo r- : commit message is mentioning "portal" while multiple apps are touched and I see "bellow"

Julien00859 · 2019-04-11T07:45:23Z

What would a correct commit message looks like ? "and I see 'bellow'" ????

qsm-odoo · 2019-04-11T07:58:39Z

As you wish as long as you mention the apps you touch... I personally would write [FIX] portal, * and add other apps on first message line with * aaa, bbb, ccc.

And yes, you wrote "bellow" in your commit message...

Julien00859 · 2019-04-11T14:42:03Z

ping @qsm-odoo

Julien00859 · 2019-04-15T11:42:49Z

ping @qsm-odoo I have customers waiting

nim-odoo · 2019-04-15T17:00:52Z

Title:

[FIX] account, portal, sale: odd sidebar on IE11

qsm-odoo

@robodoo r+

robodoo · 2019-04-16T04:50:19Z

Linked pull request(s) odoo/enterprise#4057 not ready. Linked PRs are not staged until all of them are ready.

Open a quotation from the portal using IE11. The sidebar is rendered as it did not have any width. What we are trying to achieve on large screens is to create a sidebar with a fix width the size of its children and to let the rest of the content (right to the sidebar) expands. On small screens we want to invert the direction from left-to-right to up-to-bottom. The classes `col-12`, `col-lg` and `flex-lg-grow-0` are used to fulfill that purpose. The problem is due to the rule `flex-grow: 0 !important` applied by the selector `.flex-lg-grow-0` on the sidebar. On Chrome/Firefox the dom element takes the width of his children as minimal width, the `flex-grow: 0` does not shrink the element below that minimal width. IE11 does not set a minimal width based on the child elements of the node, the width is equal to 0 and the `flex-grow: 0` forbid it from growing. The solution is to replace the said classes by the `col-lg-auto` class that does exactly what we want and is cross-browser. opw-1944188 opw-1935087

nim-odoo · 2019-04-16T06:12:12Z

robodoo r+

robodoo · 2019-04-16T09:11:37Z

Merged, thanks!

Julien00859 requested review from stefanorigano and qsm-odoo April 8, 2019 09:24

robodoo added the seen 🙂 label Apr 8, 2019

Julien00859 force-pushed the 12.0-opw-1944188-ie11_quotation-juc branch 2 times, most recently from 576f52f to e153eb5 Compare April 8, 2019 09:52

C3POdoo added the OE the report is linked to a support ticket (opw-...) label Apr 8, 2019

robodoo added the CI 🤖 Robodoo has seen passing statuses label Apr 8, 2019

stefanorigano reviewed Apr 8, 2019

View reviewed changes

Julien00859 force-pushed the 12.0-opw-1944188-ie11_quotation-juc branch from e153eb5 to 88f0717 Compare April 8, 2019 12:25

Julien00859 requested a review from stefanorigano April 8, 2019 12:25

robodoo added CI 🤖 Robodoo has seen passing statuses and removed CI 🤖 Robodoo has seen passing statuses labels Apr 8, 2019

stefanorigano reviewed Apr 8, 2019

View reviewed changes

qsm-odoo requested changes Apr 9, 2019

View reviewed changes

Julien00859 force-pushed the 12.0-opw-1944188-ie11_quotation-juc branch from 88f0717 to abdf175 Compare April 9, 2019 12:25

robodoo removed the CI 🤖 Robodoo has seen passing statuses label Apr 9, 2019

Julien00859 requested a review from qsm-odoo April 9, 2019 12:36

robodoo added the CI 🤖 Robodoo has seen passing statuses label Apr 9, 2019

robodoo added the r+ 👌 label Apr 11, 2019

Julien00859 force-pushed the 12.0-opw-1944188-ie11_quotation-juc branch from abdf175 to 6640004 Compare April 11, 2019 08:08

robodoo added CI 🤖 Robodoo has seen passing statuses and removed CI 🤖 Robodoo has seen passing statuses labels Apr 11, 2019

qsm-odoo approved these changes Apr 16, 2019

View reviewed changes

nim-odoo force-pushed the 12.0-opw-1944188-ie11_quotation-juc branch from 6640004 to d37948b Compare April 16, 2019 06:10

robodoo removed CI 🤖 Robodoo has seen passing statuses r+ 👌 labels Apr 16, 2019

robodoo added r+ 👌 CI 🤖 Robodoo has seen passing statuses labels Apr 16, 2019

robodoo added the merging 👷 label Apr 16, 2019

robodoo closed this in d5d9347 Apr 16, 2019

robodoo added merged 🎉 and removed merging 👷 labels Apr 16, 2019

Julien00859 deleted the 12.0-opw-1944188-ie11_quotation-juc branch April 16, 2019 09:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FIX] portal: odd sidebar on IE11 #32484

[FIX] portal: odd sidebar on IE11 #32484

Julien00859 commented Apr 8, 2019 •

edited

Loading

stefanorigano Apr 8, 2019

stefanorigano Apr 8, 2019

Julien00859 Apr 8, 2019 •

edited

Loading

qsm-odoo Apr 9, 2019

stefanorigano Apr 9, 2019

qsm-odoo Apr 9, 2019

sswapnesh Apr 9, 2019

qsm-odoo Apr 9, 2019

Julien00859 commented Apr 9, 2019 •

edited

Loading

Julien00859 commented Apr 9, 2019 •

edited

Loading

Julien00859 commented Apr 9, 2019 •

edited

Loading

stefanorigano commented Apr 9, 2019

qsm-odoo commented Apr 10, 2019

Julien00859 commented Apr 10, 2019

Julien00859 commented Apr 11, 2019

qsm-odoo commented Apr 11, 2019

qsm-odoo commented Apr 11, 2019

Julien00859 commented Apr 11, 2019

qsm-odoo commented Apr 11, 2019 •

edited

Loading

Julien00859 commented Apr 11, 2019

Julien00859 commented Apr 15, 2019

nim-odoo commented Apr 15, 2019

qsm-odoo left a comment

robodoo commented Apr 16, 2019

nim-odoo commented Apr 16, 2019

robodoo commented Apr 16, 2019

[FIX] portal: odd sidebar on IE11 #32484

[FIX] portal: odd sidebar on IE11 #32484

Conversation

Julien00859 commented Apr 8, 2019 • edited Loading

stefanorigano Apr 8, 2019

Choose a reason for hiding this comment

stefanorigano Apr 8, 2019

Choose a reason for hiding this comment

Julien00859 Apr 8, 2019 • edited Loading

Choose a reason for hiding this comment

qsm-odoo Apr 9, 2019

Choose a reason for hiding this comment

stefanorigano Apr 9, 2019

Choose a reason for hiding this comment

qsm-odoo Apr 9, 2019

Choose a reason for hiding this comment

sswapnesh Apr 9, 2019

Choose a reason for hiding this comment

qsm-odoo Apr 9, 2019

Choose a reason for hiding this comment

Julien00859 commented Apr 9, 2019 • edited Loading

Julien00859 commented Apr 9, 2019 • edited Loading

Julien00859 commented Apr 9, 2019 • edited Loading

stefanorigano commented Apr 9, 2019

qsm-odoo commented Apr 10, 2019

Julien00859 commented Apr 10, 2019

Julien00859 commented Apr 11, 2019

qsm-odoo commented Apr 11, 2019

qsm-odoo commented Apr 11, 2019

Julien00859 commented Apr 11, 2019

qsm-odoo commented Apr 11, 2019 • edited Loading

Julien00859 commented Apr 11, 2019

Julien00859 commented Apr 15, 2019

nim-odoo commented Apr 15, 2019

qsm-odoo left a comment

Choose a reason for hiding this comment

robodoo commented Apr 16, 2019

nim-odoo commented Apr 16, 2019

robodoo commented Apr 16, 2019

Julien00859 commented Apr 8, 2019 •

edited

Loading

Julien00859 Apr 8, 2019 •

edited

Loading

Julien00859 commented Apr 9, 2019 •

edited

Loading

Julien00859 commented Apr 9, 2019 •

edited

Loading

Julien00859 commented Apr 9, 2019 •

edited

Loading

qsm-odoo commented Apr 11, 2019 •

edited

Loading