Var not defined

Created on 13 November 2023, over 1 year ago
Updated 15 December 2023, over 1 year ago

Problem/Motivation

When using the 'Link to webform' formatter to open a webform dialog, clicking on the Anchor Element doesn't display the dialog. Upon inspection, it was found that the dialog is added to the page via AJAX but is missing a z-index value.

Steps to reproduce

1. Ensure that the Webform module is installed on your Drupal site.
2. Create a new field of type "Reference Webform" in a content type of your choice.
3. Configure the field to use the "Link to webform" formatter.
4. Create a new content using the content type with the configured Reference Webform field.
5. Make sure the created content has a valid webform selected in the Reference Webform field.
6. In connected mode, navigate to the page where the new content is published.
7. Click on the link generated by the "Link to webform" formatter to display the pop-in.

Proposed resolution

To address the issue, the missing z-index values should be defined in the CSS file `core/themes/claro/css/components/jquery.ui/theme.pcss.css`:

/**
 * @file
 * Claro styles for jQuery UI.
 * Overrides /core/assets/vendor/jquery.ui/themes/base/theme.css.
 */

:root {
  --jui-dialog-z-index: 1260;
  --jui-dialog-off-canvas-z-index: 501;
}

/**
 * Component containers
 */
.ui-widget {
  background: none;
}
.ui-widget-content {
  border: none;
}

.ui-dialog {
  z-index: var(--jui-dialog-z-index);
}

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Closed: cannot reproduce

Version

10.1

Component
Claro 

Last updated 3 days ago

Created by

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024