Forkert margin over fieldset legend i Firefox

[jkruse]

Bekskriv fejlen (Describe the bug) Tjekboks eksemplet på designsystem.dk indeholder i Firefox en relativt stor margin over overskriften. I Chrome/Edge er der ingen margin. Margin ligger ind i den form-group der anvendes, og som der markeres fejl på, hvorfor den røde streg i eksemplet på fejlmeddelelse i Firefox strækker sig et pænt stykke over overskriften.

Indsæt link (Add a URL) https://designsystem.dk/komponenter/tjekboks/

Screenshots Chrome (korrekt):

Firefox (forkert):

Sådan burde det fungere (Expected behavior) Som i Chrome.

[detfaellesdesignsystem]

Hej @jkruse,

Tak for henvendelsen.

Der er oprettet en sag på at rette eksemplet til. Jeg regner med, at det kan komme med i næste sprint.

Du kan løse det ved at ændre class i legend fra h5 til form-label

<div class="form-group form-error">
    <fieldset aria-describedby="example-checkbox-error">
        <legend class="form-label">Tjekboks med fejl</legend>
        <span class="form-error-message" id="example-checkbox-error"><span class="sr-only">Fejl:</span> Hjælpsom fejlmeddelelse</span>
        <ul class="nobullet-list">
            <li>
                <input id="checkboxerror1" type="checkbox" name="checkboxerror" value="1" class="form-checkbox checkbox-large ">
                <label for="checkboxerror1" class="">Tjekboks 1</label>
            </li>
            <li>
                <input id="checkboxerror2" type="checkbox" name="checkboxerror[]" value="2" class="form-checkbox checkbox-large ">
                <label for="checkboxerror2" class="">Tjekboks 2</label>
            </li>
            <li>
                <input id="checkboxerror3" type="checkbox" name="checkboxerror[]" value="3" class="form-checkbox checkbox-large ">
                <label for="checkboxerror3" class="">Tjekboks 3</label>
            </li>
        </ul>
    </fieldset>
</div>

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

[jkruse]

Fantastisk, det løser problemet.