1

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?

robg
  • 15
  • 5

1 Answers1

2

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.

Rolf
  • 2,178
  • 4
  • 18
  • 29
  • Rolf thanks for your reply. I had some "part" selectors in custom theme .js files. None of them survived the migration from v14 to v24. I've been able to replace them with the new v24 style selectors, either in the old theme .js files or in the style section of the hosting component. I haven't been able to get /frontend/themes//styles.css to work at all. You mentioned applying the theme to the UI with the @Theme annotation. Maybe that's the missing piece. How is that done on the client side? My app is a statically served web app using Vaadin components. There's no Java backend. – robg Apr 27 '23 at 23:58
  • To add to the previous comment, I'm still not able to get vaadin-dialog-overlay styling to work. – robg Apr 28 '23 at 01:17
  • Ah, I see, the @Theme annotation and the entire auto-loading of styles.css is indeed a Flow/Hilla framework specific thing, so if you're not using either of those, then of course you need to actually load your stylesheets manually. Regardless, those vaadin-dialog-overlay based selectors should work just fine when placed in a regular stylesheet – no Vaadin specific magic involved there. Are you actually loading your stylesheets in any way? – Rolf Apr 28 '23 at 08:05
  • Rolf, when using templates inside vaadin-dialog (and importing the polymer legacy adapter), CSS styling on vaadin-dialog-overlay is ineffective for me. I think I've tried everything. However, I was able to apply the styling I needed via Javascript – robg May 09 '23 at 19:14