Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I use CSS for Vaadin components?

I seem to be seeing examples, where people answer to questions how to get some specific behavior from components by adding CSS code, however nobody seems to explain how to use that CSS code to connect it to Java components...

.v-table-body{
  overflow: hidden !important;
}

How do I use for instance this code on my table that I create?

Table table = new Table(caption);

    table.addContainerProperty("Visit ID", Long.class, null);
like image 974
Arturas M Avatar asked Jan 11 '13 09:01

Arturas M


People also ask

How do I use CSS in vaadin?

Put the CSS file in the src/main/webapp/VAADIN/* directory and use @StyleSheet("vaadin://style.css") . Put the css file in the src/main/resources/com/example/demo/ directory and use @StyleSheet("style.

How can I change vaadin theme?

Starting from Vaadin 7.3, you can change themes in the application without reloading the page. To do this, simply use the UI. setTheme(String) method. In this way, you can let your users choose the look of your application.

What are Vaadin components?

Vaadin components are custom HTML elements that are registered with the browser.

What is vaadin bom?

The Vaadin bom fixes all vaadin-related dependencies to a tested combination, so that the individual components can be added safely.


1 Answers

You can create you own custom theme. See https://vaadin.com/book/-/page/themes.creating.html how to do that.
In this theme you have a css style sheet where you can put your rules.

On every Component you can use the addStyleName function to add an additional class name:

Table table = new Table("MyCaption");
table.addStyleName("mystyle");

Now you can use this in your style sheet:

@import "../reindeer/styles.css";

.mystyle{
  overflow: hidden !important;
}
like image 176
raffael Avatar answered Sep 23 '22 03:09

raffael