Contrib.social

Claro theme overriding the position of the close button on dialogs

Open on Drupal.org →
Created on 11 March 2025, about 2 months ago

Claro theme seems to override the position of the close button on dialogs. When using layout_builder_iframe_modal in layout builder the close button on the dialog is not visible.

If I override these two styles set by the Claro theme, it displays correctly.

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
-  inline-size: var(--jui-dialog-close-button-size);</del>
+  inline-size: 2rem;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon.ui-icon-closethick {
-  transform: translate(-50%, -50%);
+  transform: none;
}
🐛 Bug report
Status

Active

Version

4.0

Component

Code

Created by

🇺🇸United States jphelan

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

Comments & Activities

  • Issue created by @jphelan
  • Comment about 2 months ago →
    🇺🇸United States jphelan
  • Comment 19 days ago →
    🇬🇧United Kingdom niklp Nottingham

    Seeing something similar manifest in webform dialogs also.

  • Comment 16 days ago →
    🇮🇳India vasantha deepika Coimbatore
  • Comment 16 days ago →
    🇮🇳India vasantha deepika Coimbatore

    Could you please provide the steps to reproduce it? This will help us understand the context.

  • Comment 16 days ago →
    🇺🇸United States jphelan
    • Install layout_builder_iframe_modal
    • Enabled layout builder on a content type
    • Create a node and the edit the layout
    • add a section and then add a block
    • Select "Create content block"
    • Select the basic content block and it should open in a modal
    • You should notice that the close button, while present, is not visible
  • Comment 12 days ago →
    🇮🇳India vasantha deepika Coimbatore
  • Comment 12 days ago →
    🇮🇳India vasantha deepika Coimbatore

    Hi @jphelan, I couldn't reproduce the issue on my end, i tried with the versions mentioned below

    Gin theme version: 4.0.6
    Layout Builder iFrame Modal version: 1.3.6

    Could you please let me know which version of the Layout Builder iFrame Modal you're using?

  • Comment 12 days ago →
    🇺🇸United States jphelan

    Drupal Version - 11.1.5
    Gin 4.0.6
    layout_builder_iframe_modal 1.3.6

    Attached my gin theme settings.

    Odd, you don't see the
    core/themes/claro/css/components/dialog.css
    styles loading and overriding the gin styles?
    themes/contrib/gin/dist/css/components/dialog.css

  • Comment 1 day ago →
    🇮🇳India sandip

    Yes @jphelan, this issue is reproducable and the css is coming from claro which is overriding gin styles. i am attaching SS for reference.
    I am working on it.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024