CODEWITHSUNDEEP
vaadinpolymer-3.xvaadin24
robg
robg

Reputation: 25

How to style vaadin-dialog in Vaadin 24?

I've upgraded my Polymer 3 Javascript app from Vaadin 14 components to Vaadin 24 components. The custom theme styling I was using to style vaadin-dialog-overlay does not work with v24, and the new v24 CSS selectors do not work for me either.

Here's and example of what was working with v14 components:

:host([theme="initialization"]) [part="content"] {
  min-width: 30em;
  padding: 24px;
  align-items: center;
}

With v24, I've tried the following two styling selectors with no success:

vaadin-dialog-overlay::part(content)
vaadin-dialog-overlay::part(overlay)

I've tried putting them in a custom theme, in the component hosting vaadin-dialog, in frontend/themes/my-theme/styles.css, and in frontend/themes/my-theme/components/vaadin-dialog-overlay.css.

Here's an example of declaring vaadin-grid in HTML

Here's another example of what I need to get to work using a theme of "left":

vaadin-dialog-overlay::part(overlay) {
  width: 45em;
  position: absolute;
  top: 0;
  left: 0;
}

In the Chrome Inspector Styles section, I can manually enter the overlay part attributes I want and they get applied as expected, but in my code, I can't get anything to work.

How do you get styling of vaadin-dialog parts to work in v24 components?

Upvotes: 1

Views: 801

Answers (1)

Rolf
Rolf

Reputation: 2418

The CSS snippet you posted does work just fine for me when placed in the theme's styles.css.

It targets all Dialogs, of course, not just ones with the "left" theme, so if you want to target those only, you'd write that selector as vaadin-dialog-overlay[theme="left"]::part(overlay), or just apply a classname instead (no need for theme attribute) and use vaadin-dialog-overlay.left::part(overlay)

As for the content part, the selector should be

vaadin-dialog-overlay[theme="initialization"]::part(content)

(And btw, the V14-style Shadow DOM CSS still works in V24, so you should be able to use that as-is)

Does other CSS work for you? If not, check that you're actually applying the theme to the UI with a @Theme annotation.

Upvotes: 2

Related Questions