Adding own HTML element and custom CSS in Vaadin application

Question

I'm creating a web application in Vaadin. I found there is a possibility to add custom layout with CSS or create your own theme to existing vaadin component. Is there a possibility to add your own html element and css in Vaadin application? If yes, how can You achieve it? (Java 8, Intellij IDEA)

It depends what do you wish to achieve. But adding CSS to vaadin is just a matter of adding it to sccs styles, html as you mentioned to the custom layouts (or via Label in html rendering mode) — André Schild
– André Schild, Commented Nov 28, 2016 at 10:31
I created simple news-ticker in pure HTML and CSS and try to add it to my application (that mostly contains vaadin elements). So You think about custom layout like: vaadin.com/docs/-/part/framework/layout/…? — gooornik07
– gooornik07, Commented Nov 28, 2016 at 10:36

Reto Höhener · Accepted Answer · 2016-11-28 11:04:24Z

2

Among other things, you can write HTML and CSS directly by setting the content mode of a label to HTML:

Label label = new Label("<p style='background: yellow;'>Test</p>");
label.setContentMode(ContentMode.HTML);

answered Nov 28, 2016 at 11:04

Reto Höhener

5,9464 gold badges53 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chris M Over a year ago

If you ever re-display user entered text inside your HTML here make sure you cleanse it otherwise you might be opening up your application to XSS etc...

gooornik07 Over a year ago

Cross-site scripting :( Actually not a bad idea to write inside a label, but my css is a little bit complicated with many animations so it would require additional work to rewrite it to one html file :(

gooornik07 Over a year ago

EDIT Forgot about internal CSS style- it's easy to make html out of html + css, i will try this for short-term purposes if i won't find better solution :)

Reto Höhener Over a year ago

Vaadin has pretty extensive support for CSS: vaadin.com/docs/-/part/framework/themes/themes-creating.html

Collectives™ on Stack Overflow

Adding own HTML element and custom CSS in Vaadin application

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related