techne icon indicating copy to clipboard operation
techne copied to clipboard

Bug: Inline checkbox and radio form_items have no right margin

Open xak opened this issue 7 years ago • 1 comments

See https://sap.github.io/fundamental/form.html#radio-buttons

screen shot 2017-11-16 at 4 51 52 pm

The tn-form__items must be wrapped with a tn-form-group. It's the same pattern as a form-item where the tn-form__set, tn-form__legend, and tn-form__group act like the item, label and control, respectively.

<fieldset class="tn-form__set">
    <legend class="tn-form__legend">Form set legend</legend>
    <div class="tn-form__group">
        <div class="tn-form__item tn-form__item--inline tn-form__item--check">
            <label class="tn-form__label" for="wmGlO599">
                <input type="radio" class="tn-form__control" id="wmGlO599" name="bar">
            Field label
            </label>
        </div>
        <div class="tn-form__item tn-form__item--inline tn-form__item--check">
            <label class="tn-form__label" for="BucGD706">
                <input type="radio" class="tn-form__control" id="BucGD706" name="bar">
                Field label
            </label>
        </div>
        <div class="tn-form__item tn-form__item--inline tn-form__item--check">
            <label class="tn-form__label" for="2Pvy5435">
                <input type="radio" class="tn-form__control" id="2Pvy5435" name="bar">
                Field label
            </label>
        </div>
    </div>
</fieldset>

xak avatar Nov 16 '17 22:11 xak

@saadmhybris I moved this to the site dev board. The markup was never changed on the website to match the test page. This needs to be fixed.

xak avatar Feb 08 '18 04:02 xak