CODEWITHSUNDEEP
vaadin
Supamiu
Supamiu

Reputation: 8731

change background color of a Layout - Vaadin

in one of my apps, i created a footer :

public Footer(){
        hl.setHeight("120px");
        hl.setWidth("100%");
        hl.setMargin(true);
        hl.setSpacing(true);

    VerticalLayout contact = new VerticalLayout();
    Label contact_title = new Label("Contact");
    Label mail = new Label("<a href='mailto:[email protected]'>Par email</a>",ContentMode.HTML);

    contact.addComponents(contact_title,mail);


    hl.addComponent(contact);               
}

where hl = new HorizontalLayout();

This footer is included in my main page (absoluteLayout). But the problem is i don't see the difference between my main content and the footer, mainly because it's the same background color. SO i wanted to change the footer's background Color, here is how i tried :

adding hl.addStyleName("backColorGrey"); in the code and .backColorGrey{background-color:#ACACAC} in my theme .scss, i tried the same with .v-horizontallayout-backColorGrey as class name in css.

I also tried with JavaScript.getCurrent().execute("$('.backColorGrey').css('background-color', 'grey')");

but nothing to do, the color remains the same, it never changed.

to try javascript, i tried to do an alert : JavaScript.getCurrent().execute("alert('Hi SO!')"); but it did not work, and i wonder why.

So now, how can i do to change my hl's background color?

Upvotes: 2

Views: 14317

Answers (1)

Kevvvvyp
Kevvvvyp

Reputation: 1774

Sounds like you are on the right track. I noticed in your css you did not end the background-colour with a semi colon. (May have just been a typing error).

It could be that your theme is not compiling correctly. Check that you have included a mixin definition in your theme.

Vaadin...

Footer footer = new Footer();
footer.addStyleName("backColorGrey");

Scss....

@import "../reindeer/reindeer.scss";

@mixin mytheme{

    @include reindeer;

      .backColorGrey{
           background-color:#ACACAC;
      }

}

Are you using maven/gradle/ivy? You may need to add a sass compiler in your pom.xml see VAADIN cannot find themes when in productionMode

Also check that you are not in production mode...

When a Vaadin application is in development mode, it does the SCSS -> CSS compilation automatically when styles.css is requested and the file does not exist. In the production mode this does not happen. If styles.css exists, regardless of mode, the file is used and there is no SCSS -> CSS compilation

Upvotes: 4

Related Questions