Invalid ScrollBar appearance with setMargin(true)

Flow
1

Hello!
I have a simple view:

public class FakeView extends VerticalLayout {

  public FakeView() {
    setMargin(false);
    setPadding(false);
    setSpacing(false);
    
    TabSheet ts1 = new TabSheet();
    ts1.addThemeVariants(TabSheetVariant.LUMO_BORDERED);
    TextField ts1tf = new TextField();
    ts1tf.setWidth("100%");
    VerticalLayout ts1vl = new VerticalLayout(ts1tf);
    ts1vl.setMargin(true); // if true, problem
    ts1vl.setPadding(false);
    ts1.add("Test", ts1vl);
    ts1.setWidth("100%");
    
    VerticalLayout vl = new VerticalLayout(new TextField(), ts1);
    vl.setMargin(true); // if true, problem
    vl.setPadding(false);
    vl.setWidth("100%");
    
    TabSheet ts = new TabSheet();
    ts.addThemeVariants(TabSheetVariant.LUMO_TABS_MINIMAL);
    ts.add("Test", vl);
    ts.setWidth("100%");
    
    add(ts);
    
    setWidth("100%");
  }
}

If I set margin to true for my layout, my view is rendered with invalid scroll bars:

image
image889×331 2.39 KB

What is wrong?

Vaadin version: 24.3.13

2

Nothing is wrong, margin is working as intended there. Margin is extra space outside an element. If you have an element A that has 100% width, that’s the same as saying the element A is to be as wide as its parent B. If you add a margin to A, the width total is going to be (100% of B + margin).

3

Thank you. In my case I should use padding. Is it correct?

4

Yes, padding is probably what you are looking for