Vertical position problem with theme Olivero: block diplay depends on the user role

Created on 18 April 2023, about 1 year ago
Updated 22 August 2023, 10 months ago

Problem/Motivation

If some blocks are displayed in the footer, the vertical position of elements changes following the user role, through its permissions. If the position is good for some users it is bad for some others. Users are not happy of this.

It seems come from that in the footer a grid is used for display. The first child of the block is not display for users with low permissions, but exists. This element needs property position: absolute to be invisible for the browser, otherwise it contributes in a non 0 way to the height of the parent with property display: none, making a difference of position. When the user permissions is strong enough, it is the case since the child has the class contextual, allowing access to it in file core/modules/contextual/css/contextual.theme.css. When the user permissions is not strong enough, the child has not this class and then has not the property.

Steps to reproduce

Proposed resolution

The first child, with data-contextual-id attribute, needs to have the property position: absolute in all the case,
- either having always the class contextual,
- either through a specific rule in core/themes/olivero/css/layout/grid.css like,

.grid-full .contextual-region div[data-contextual-id] {
  position: absolute;
}

- or some thing else.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Active

Version

9.5

Component
Olivero 

Last updated about 11 hours ago

Created by

🇫🇷France Chris64 France

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @Chris64
  • 🇮🇳India Moni_10

    Hi, the given information is not enough to reproduce this issue. I've tested it with different user roles and it seems working fine. Please provide the steps to reproduce this issue with screenshots. So, that it can be replicate easily.

  • 🇫🇷France Chris64 France

    Hi @Moni_10. Here some elements. May be not enough. Two blocs in the footer. The first one is from Drupal: olivero_powered. The second one is created with a view. With one field of type custom text. With the two images *A0 the problem can be seen: the height difference. Seems a detail, but annoying. The image *A1 shows what may be a key element: the difference between the two roles used. One is a basic role. The other is administrator, with the editing functionality shown in image *A1. This functionality doesn't exists for the other role. The presence or the absence of this correspond to different css configurations that create the problem. The goal of the change is to get some thing not depending on the role.

  • 🇮🇳India Gauravvv Delhi, India

    We already have position: absolute; on contextual class and on contextual class is added on div[data-contextual-id]

  • 🇫🇷France Chris64 France

    @Gauravvvv, same observation than you about contextual, but only for an administrator role. For a non administrator role such a contextual is missing. And it causes the problem. May be you prefer some thing specific to the default case.

  • 🇮🇳India Gauravvv Delhi, India

    In case of administration, we already have contextual which have position: absolute;. And for other user when contextual is not available, [data-contextual-id] is also not present, so no use of adding position: absolute;

  • 🇫🇷France Chris64 France

    @Gauravvvv, I want to say that position: absolute; is needed for other user too. I think.

  • 🇫🇷France Chris64 France

    For a better answer, as it can be seen on the image, in the case of non administrator role, class contextual-region and attribute data-contextual-id exist for the element. But may be it is a particular case.

  • 🇮🇳India nilesh.k

    I'm unable to reproduce the issue. I have followed the provided steps, and there is already a "position: absolute" property in place. I've also tested it with different roles and added a screenshot.

  • 🇫🇷France Chris64 France

    @nilesh.k, I try to understand why you don't get the same result than us. Verified again: same problem for us. Our html codes compared, between administrator an non administrator roles: the root difference is instruction class="contextual": only when it is okay. In your example class="contextual" is here, and the css is called (in our case it is the file core/modules/contextual/css/contextual.theme.css). To which role corresponds your example? For non administrator role do you really have the class="contextual"? We don't.

Production build 0.69.0 2024