Muhammad Salman Farooq
Muhammad Salman Farooq

Reputation: 1325

Injecting CSS dynamically in Vaadin

I am developing an application in Java Vaadin framework in which I am using its Calendar Add-on. That calendar has some component called "Basic Event" on it. Now I want to color that component on run time by creating a CSS class dynamically on run time. How can I achieve that functionality? Any Help! Thanks!

Upvotes: 3

Views: 7472

Answers (2)

Oleksii Kyslytsyn
Oleksii Kyslytsyn

Reputation: 2426

I have used an addon which was mentioned by Sumit Singh, and the current "native"-way is https://vaadin.com/wiki/-/wiki/Main/Dynamically%20injecting%20CSS

in brief:

          Styles styles = Page.getCurrent().getStyles();
          // inject the new background color
          styles.add(".v-app .v-textarea.text-label { background-color:white; }");

Upvotes: 3

Muhammad Salman Farooq
Muhammad Salman Farooq

Reputation: 1325

I have tried and succeeded with the following code.

   package com.example.cssinject;

   import org.vaadin.cssinject.CSSInject;

   import com.vaadin.Application;
   import com.vaadin.ui.*;

    public class CssinjectApplication extends Application {
    @Override
    public void init() {

    final Window mainWindow = new Window("Cssinject Application");
    final Label label = new Label("Hello Vaadin user");
    mainWindow.addComponent(label);

    CSSInject css = new CSSInject();
    css.setValue(".custom-style { color: rgb(100, 200, 0); }");
    mainWindow.addComponent(css);

    label.setStyleName("custom-style");

    setMainWindow(mainWindow);  
}
}

Upvotes: 5

Related Questions