Skip to content
Snippets Groups Projects
user avatar
Romain Derie authored
There is 2 issues regarding the responsiveness of the cookiebar:

==== Problem n°1: ====
======================

By default, `.modal-dialog` receive a O.5rem margin.
```css
    .modal-dialog {
        margin: 0.5rem;
    }
```

But it only takes effect in small resolution, as starting from SM (576px,
see _breakpoints.scss), the margin is set to 0. `.modal-dialog` receive:
```css
    @media (min-width: 576px)
    .modal-dialog {
        margin: 0 auto;
    }
```

On top of that, the `.modal-dialog` has a `min-height` of 100%, which is
getting too big in XS, as there is a 0.5rem margin, which adds up on top
of the 100%
```css
    .s_popup[data-vcss='001'] .modal-dialog {
        height: auto;
        min-height: 100%;
    }
```
It results in a modal height bigger than the screen size, ultimately
creating a scrollbar for just a few pixels (2 * 0.5rem margin), making
the cookies bar partly hidden by the screen.

==== Problem n°2: ====
======================

The buttons from the cookies bar "discrete" template are simple `<a/>`
elements inside a `div.col`.
Those links have no bottom margin like a paragraph would have.
In LG screen, it is fine as the col containing those links is next to
the other col containing the paragraph which adds the margin bottom,
making elements not stuck to the bottom edge of the screen:

------------------------------
|  COL-LG    |     COL-LG    |
|   <p/>     |   <a/> <a/>   |
|                            | <-- bottom margin set on <p/>
------- screen edge ----------

But in lower resolution, as both col would be on top of each other, the
`<a/>` would be stuck to the bottom screen border.
--------------
|  COL-LG    |
|   <p/>     |
|            | <-- bottom margin set on <p/>
--------------
-----------------
|     COL-LG    |
|    <a/> <a/>  | <-- Against the screen bottom edge
-- screen edge --

======================

Steps to reproduce:
- Install Website
- Enable cookie bar in the Settings
- Go on the Website with a mobile screen width

opw-2784233

closes odoo/odoo#88905

Signed-off-by: default avatarRomain Derie (rde) <rde@odoo.com>
Co-authored-by: default avatarthcl-odoo <thcl@odoo.com>
843e5769
History

Build Status Tech Doc Help Nightly Builds

Odoo

Odoo is a suite of web based open source business apps.

The main Odoo Apps include an Open Source CRM, Website Builder, eCommerce, Warehouse Management, Project Management, Billing & Accounting, Point of Sale, Human Resources, Marketing, Manufacturing, ...

Odoo Apps can be used as stand-alone applications, but they also integrate seamlessly so you get a full-featured Open Source ERP when you install several Apps.

Getting started with Odoo

For a standard installation please follow the Setup instructions from the documentation.

To learn the software, we recommend the Odoo eLearning, or Scale-up, the business game. Developers can start with the developer tutorials