Contrib.social

Modal dialog position in RTL

Open on Drupal.org →
Created on 19 March 2023, almost 2 years ago
Updated 23 March 2023, almost 2 years ago

Problem/Motivation

In the newest release RC2: Modal dialog in RTL is sticking to the right side of the screen.

Steps to reproduce

Clean installation of Drupal 10 with Gin.
Install Language and set any RTL language as default.
Open a modal.

Proposed resolution

The issue is with this css

    .ui-dialog {
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--gin-font);
    outline: none;

After compiling with postcssRTLCSS we are getting

    [dir="rtl"] .ui-dialog {
    right: 0;
    }

while Core's dialog.position.js is adding position value to the left property.

In LTR the modal's style overrides the css and the modal is centered, but in RTL the right: 0 property is problematic with the left: x style property.

I am not really how to solve it.
This initial value seems to also affect to JS calculation (we get left: 0), So I think that even if you do something like this

[dir="rtl"] .ui-dialog:not([style]) {
    right: 0;
}

It would result in left: 0.

Why does gin to set it to 0? just as an inital settings until JS runs?

Perhaps it's a core issue? Because left should be right in RTL.

In anycase quick-fix for anyone is struggling with this until this issue is solved, you can just add this to your css.

[dir="rtl"] .ui-dialog {
    right: unset;
}
🐛 Bug report
Status

Fixed

Component

Code

Created by

🇫🇷France Yonka Nevache

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

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024