diff --git a/packages/css/src/components/field-set/field-set.scss b/packages/css/src/components/field-set/field-set.scss index c5dbd83589..9b4a690462 100644 --- a/packages/css/src/components/field-set/field-set.scss +++ b/packages/css/src/components/field-set/field-set.scss @@ -28,6 +28,10 @@ float: inline-start; // [1] inline-size: 100%; // [1] padding-inline: 0; + + + * { + clear: both; // Reset the applied float for the legend’s first sibling + } } // [1] This combination allows the fieldset border to go around the legend, instead of through it. diff --git a/storybook/src/components/FieldSet/FieldSet.stories.tsx b/storybook/src/components/FieldSet/FieldSet.stories.tsx index 1aed9b47b9..ca444a3ed8 100644 --- a/storybook/src/components/FieldSet/FieldSet.stories.tsx +++ b/storybook/src/components/FieldSet/FieldSet.stories.tsx @@ -38,7 +38,7 @@ type Story = StoryObj export const Default: Story = { render: (args) => (
- + @@ -161,7 +161,7 @@ export const CheckboxGroup: Story = { }, render: (args) => (
- + Horecabedrijf @@ -187,7 +187,7 @@ export const CheckboxGroup: Story = { // render: (args) => ( //
// {args.invalid && Geef aan waar uw melding over gaat.} -// +// // // Horecabedrijf //