I’m currently migrating our app from the model with polymer models to a near full java model, so each custom component need to have each of it’s components instanciated and placed server side. No problem here, but without CSS, the styling is pretty hard and I don’t know how to add media queries and so on.
So I’ve followed the doc [here]
(https://vaadin.com/docs/v10/flow/importing-dependencies/tutorial-include-css.html) and added the annotations pointing to a copy of the CSS that was embedded in the Polymer model.
Here is the CSS :
I’ve tried with the annotation and the UI.getCurrent().getPage().addStyleSheet("/styles.component.css");, but the CSS is not applied.
I’ve check on Firefox Dev. Ed. and on Chrome if the CSS file is discovered in the rules and it’s in.
Any idea of what can cause this CSS to be ignored by the component ?
Just tried, same result, no theme applied.
I’m currently trying to include all my CSS in the shared-styles, but having separated CSS for each view would be better.
I’ve tried via the shared styles, adding all CSS to shared-styles style, but that does not work.
I’ve tried to import the style via annotations @HtmlImport and @StyleSheet.
I did not mention it but you need to include your dom-module inside a custom-style, so the dom-module will be loaded in your view, otherwise it will not be loaded.
I’ve taken a look to the simple-ui code, looked back in my shared-styles.html, and moved my custom CSS from shared-style to the existing custom-style.
But there is no dom-module in this custom-style and the one in the simple-ui is for the dialog overlay, so I don’t really understand what need to be in the dom-module inside the custom-style.
Here is the dom-module that I’ve added inside the custom-style :
AppNavigation is an extended Div tagged app-navigation. It contains a branding Div with an Anchor and an Image (app logo) and a Tabs component used to navigate through the app. All is done in Java, except the call to the constructor (not overloaded) which is done by the PolymerTemplate of the layout the View.
I’ve tried your last answer, putting the code in the shared-style.html first, not working, and after putting it in an app-navigation.html containing only the dom-module (CSS filled of course) and the custom-style, still not working.
I’m pretty sure I miss something trivial, but can’t found what…
I can’t publish all the app code to github, but I can attach the class code here and the app-navigation.html. Just tell me if you need more. I’ve also joined two screenshots, one of what it should look like with CSS loaded, and the other is the current situation, with custom CSS not loading.
The app is based on the bakery demo, but we’re trying to remove most of the Polymer templates from it. 17442232.java (2.05 KB) 17442235.html (1.64 KB)