Skip to content
Permalink
Browse files

[FIX] portal, *: odd sidebar on IE11

* account, sale

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
  • Loading branch information...
Julien00859 committed Apr 8, 2019
1 parent 4da8277 commit 66400045235c795ff7875902cdea6f289bef8efd
@@ -83,7 +83,7 @@
<div class="row mt16 o_portal_invoice_sidebar">
<!-- Sidebar -->
<t t-call="portal.portal_record_sidebar">
<t t-set="classes" t-value="'col-12 col-lg flex-lg-grow-0 d-print-none'"/>
<t t-set="classes" t-value="'col-lg-auto d-print-none'"/>
<t t-set="title">
<h2 class="mb-0">
<b t-if="invoice.residual > 0" t-field="invoice.residual"/>
@@ -174,7 +174,7 @@
</template>

<template id="portal_record_sidebar" name="My Portal Record Sidebar">
<div t-attf-class="col-12 col-lg flex-lg-grow-0 #{classes}">
<div t-attf-class="#{classes}">
<div class="card bg-white mb-4" id="sidebar_content">
<div t-if="title" class="card-body text-center pb-2 pt-3">
<t t-raw="title"/>
@@ -124,7 +124,7 @@
<div class="row mt16 o_portal_sale_sidebar">
<!-- Sidebar -->
<t t-call="portal.portal_record_sidebar">
<t t-set="classes" t-value="'col-12 col-lg flex-lg-grow-0 d-print-none'"/>
<t t-set="classes" t-value="'col-lg-auto d-print-none'"/>

<t t-set="title">
<h2 class="mb-0"><b t-field="sale_order.amount_total"/> </h2>

0 comments on commit 6640004

Please sign in to comment.
You can’t perform that action at this time.