Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Embedding Vaadin in HTML looses all Styles
I have been trying to integrate Vaadin to an existing Spring Application (No Spring Boot).
Im able to integrate usng <div> tags and Vaadin UI loads fine.
The problem is that the JSP page has many styles in header & footer (existing JSPs) and they do style settings at <body> level. So the Vaadin themes are not working.
If I run the Vaadin URL in the browser, the Styles pick correctly. But when the Vaadin page is embedded to an existing HTML using <div> tag, it does not work. I tried using iFrame based integration, but no luck.
Can you please suggest me?
I don't think the problem has to be with colliding styles. An iframe is just a box that displays another page inside of it. The problem is most likely related to the URLs used to fetch the theme resources. Can you share the relevant code and output in the client-side console?
Lovely to see a reply so early.
I cannot share the page/project as its a huge project. A sample Vaadin application works perfectly fine. When I copied the code to existing Spring Application project, I realised that the Theme SCSS file settings are not picked up at all :(.
a) If I run the Vaadin Application URL in browser, it works perfectly fine with all style settings.
b) When I embed using a DIV tag, the Vaadin App opens correctly with default Valo settings. All custom settings are lost.
I checked whether Spring-security is blocking /VAADIN/* pattern, but it is not. The DIV tags for layout (slots) are not having Style classes as set in code using setStyleName().
The page I embedded Vaadin has bunch of other CSS styles loaded, so I was wondering whether HTML BODY level style is not overridden by Vaadin? Not sure.
OK - Im able to get iFrame working for now. I will add an action item on me to check the reason on why its not working when using DIV tag (which is safer). Probably, I will enable HTTP logs and see if the calls to VAADIN themes are happening.