How to set a border on a Vaadin component?

Question

I would like to programmatically set a border around a Form component in Java. How can I do this without having to edit the css style sheet?

Solution 1

You could wrap the form with a Panel component, which has a border defined already. Otherwise, not much alternatives than just using CSS.

One option, if you wish to stay inside the server environment, is to use the CSSInject add-on and add the border using that (you still need to write CSS, but you can do it on the server in a Java file and not inside a regular CSS file).

Solution 2

Vaadin Flow — Style::set to specify CSS

In Vaadin Flow (Vaadin versions 10 and later), you can conveniently set CSS for a widget or layout programmatically. No need to edit separate CSS files, even though styling with CSS files is the recommended way.

1. On your widget/layout, call getStyle to retrieve the Style object.
2. On that Style object, call set to pass the name and value of your CSS property.

For example, I find setting a bright colored border on my nested layouts quite helpful for debugging.

myVerticalLayout.getStyle().set( "border" , "6px dotted DarkOrange" ) ; 

You can see this in action with this screenshot on my Answer to another Vaadin question here:

Comments

[yazz.com]

One problem I have is that every time I removeComponent and then addComponent with Internet Explorer 9 then the top border dissappears from the panel... works ok in Firefox, so I wanted to programmatically add the top border

[Jouni]

That sounds strange, the border shouldn't disappear. Can you post a code sample?