CODEWITHSUNDEEP
cssvaadin
Virginie
Virginie

Reputation: 949

Dynamically change background-color

I want to change the background color of my Vaadin app on the valueChange event of a OptionGroup component.

As there are a fairly big number of layouts on my page, what would be the best is to change every HorizontalLayout and VerticalLayout background-color, but every new component that could be added should have this color too.

How can I achieve that? Thanks.

Upvotes: 1

Views: 2017

Answers (1)

Sean Connolly
Sean Connolly

Reputation: 5803

Two approaches come to mind.

The simplest, conceptually, as well as in terms of implementation, would be to have a single component to serve as the background, and give your HorizontalLayout and VerticalLayout components a transparent background. If you're layout is too complex for this, you can have a number of base 'background' components, again, with your layout components on top being transparent. The idea is to reduce the components whose color you need to change to something manageable.

If that approach doesn't translate to your use case, you can always use JavaScript to select the layout components on the fly and redefine their background. This could be made more manageable by giving all the layout components a common CSS class (eg: 'dynamic-background').

JavaScript.getCurrent().execute("$('.dynamic-background').css('background-color', 'purple')");

Note that this JavaScript depends on JQuery, have a look around for more details on integrating JQuery with Vaadin:
Add javascript/Jquery & client side code in Vaadin 7
Integrating HTML and JavaScript in Vaadin 7

Upvotes: 1

Related Questions