CODEWITHSUNDEEP
vaadin
Andreas Hellrich
Andreas Hellrich

Reputation: 51

how to change background color in vaadin 14 with getStyle()

I have tried changing the background color with getStyle() but it did not quite work, even though changing the color worked.

Heres my code:

public class HomeUi extends VerticalLayout {

    public HomeUi(){
        this.setSizeFull();
        HorizontalLayout back = new HorizontalLayout();
        back.setSizeFull();
        back.getStyle().set("background","red");
        back.getStyle().set("color","blue");
        back.add(new Paragraph("HELLO BEAUTIFUL WORLD!"));
        this.add(back);
    }
}

Upvotes: 0

Views: 1115

Answers (3)

Knoobie
Knoobie

Reputation: 2064

The following works:

back.getStyle().set("background-color","red");

Upvotes: 2

Andreas Hellrich
Andreas Hellrich

Reputation: 51

The issue was that I used Vaadin in compability mode. I upgraded the Vaadin version to 23 and removed compability mode and then changing the color worked fine.

Upvotes: 0

Avec
Avec

Reputation: 1761

I just tested your code and it works as you expected. I got red background with blue text.

@Slf4j
@PageTitle("test")
@Route(value = "test", layout = MainLayout.class)
public class TestView extends VerticalLayout {

    public TestView() {
        this.setSizeFull();
        HorizontalLayout back = new HorizontalLayout();
        back.setSizeFull();
        back.getStyle().set("background","red");
        back.getStyle().set("color","blue");
        back.add(new Paragraph("HELLO BEAUTIFUL WORLD!"));
        this.add(back);
    }
}

Result

enter image description here

Upvotes: 0

Related Questions