Layout/Div is transparent when set to position sticky

Hello, I tried to make a form with sticky header and footer in a Dialog, but when I tried adding the .getStyle().set(“position”,“sticky”).set(“top”,“5px”).set(“background-color”,“grey”); to the header, it’s gray but somehow made it transparent and the content is visible and clickable under it. I don’t know how to do it and I can’t seem to find anyone with this problem.

And I’m using Vaadin 14!

Dialog user = new Dialog();
Div full = new Div();
Div header = new Div();
Div footer = new Div();
header.add(new label("Test"));
header.getStyle().set("position","sticky").set("top","5px").set("background-color","grey");
footer.add(new Label("footerTest"));
footer.getStyle().set("position","sticky").set("bottom","5px").set("background-color","grey");
full.add(header, content, footer);

I ran your code and could see no transparency, or overlapping of elements. Can you show how it looks for you?

This is the code I used for this, which is basically your code with added lines for content and opening the Dialog.

Dialog user = new Dialog();
Div full = new Div();
Div header = new Div();
Div content = new Div();
Div footer = new Div();
header.add(new Label("Test"));
header.getStyle().set("position","sticky").set("top","5px").set("background-color","grey");
content.add(new Span("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna"));
footer.add(new Label("footerTest"));
footer.getStyle().set("position","sticky").set("bottom","5px").set("background-color","grey");
full.add(header, content, footer);
user.add(full);
user.open();

The result screenshot is in the attachment position_sticky.PNG:
17822402.png

Kaspar Scherrer:
I ran your code and could see no transparency, or overlapping of elements. Can you show how it looks for you?

This is the code I used for this, which is basically your code with added lines for content and opening the Dialog.

Dialog user = new Dialog();
Div full = new Div();
Div header = new Div();
Div content = new Div();
Div footer = new Div();
header.add(new Label("Test"));
header.getStyle().set("position","sticky").set("top","5px").set("background-color","grey");
content.add(new Span("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna"));
footer.add(new Label("footerTest"));
footer.getStyle().set("position","sticky").set("bottom","5px").set("background-color","grey");
full.add(header, content, footer);
user.add(full);
user.open();

The result screenshot is in the attachment position_sticky.PNG:

It’s transparent when there are too much conponent in the content, and when you scroll in it, the label stays, but the background is transparent.