Styling issue: FieldSet overflowing

Flow
1

Hi,

I use FieldSets to structure certain parts of the UI. When a FieldSet is set to full width, and the surrounding layout has no padding, the FieldSet becomes to wide for the browser window.

    FieldSet fs = new FieldSet("My Fieldset", new Span("Some content"));
    fs.setWidthFull();
    VerticalLayout layout = new VerticalLayout(fs);
    layout.setSizeFull();
    layout.setPadding(false);

{44CA3378-36BD-42CF-8C67-B796775971C4}
{44CA3378-36BD-42CF-8C67-B796775971C4}1004×168 4.24 KB

If padding is set to true, the FieldSet looks fine:

{1D1C16C3-5007-4398-90AA-317B367DD394}
{1D1C16C3-5007-4398-90AA-317B367DD394}1006×167 4.24 KB

How can I fix this to have the FieldSet not overflowing, while the layout has no padding?

2

FieldSet is just the native html <fieldset> element, without any Vaadin-specific css, and I think browsers give it a small margin by default.

Width does not include the margin of an element, so the horizontal space an element takes is the width + the horizontal margins. Setting 100% width on an element with horizontal margins means that the width is 100% of the container, but then the margins add on top of that, making it a bit wider than the container.

So the workaround is to remove the margin from the FieldSet, with inline styles, a utility class, or in a stylesheet.

3

It seems that it’s not the margin, but the padding (more precisely padding-inline) of the FieldSet. If I remove this, the total width is fine, but then the content moves close to the border and the label also is way too left. :-/

{3D8336CF-D5A5-45FF-8AA8-406905AD89CB}
{3D8336CF-D5A5-45FF-8AA8-406905AD89CB}1000×167 3.86 KB

I still don’t really understand why changing the padding of the parent component causes this.

(btw, missing the old Panel component… ;-) )

4

Just for the record, I “fixed” it this way:

fieldset {
    width: calc(100% - 1.5em);
}
5

Sounds like box-sizing: border-box; should fit it then.