[BUG] The required red asterisk of a Radio component is misaligned when Required, Inline layout and Hide Label properties are on.

[pboucher1960]

Environment

Please provide as many details as you can:

• Hosting type
  • Can be reproduced in the Form.io playground
• Browser: Chrome
• Browser version: 109.0.5414.75 (Official Build) (64-bit)

Steps to Reproduce

Create a form with one radio component with two options, set Inline Layout (true), Hide Label (true) and Required (True).

Expected behavior

The red asterisk should be on the right of each options if not inline or only on the right of the last option if inlined.

Observed behavior

The red asterisk is on the left of each option and can overlap on the label of the previous option when inline.

Example

Screen shot from the playground:

Code to reproduce in form.io playground:

{
    "display": "form",
    "settings": {
        "pdf": {
            "id": "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
            "src": "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0"
        }
    },
    "components": [
        {
            "label": "Radio",
            "optionsLabelPosition": "right",
            "inline": true,
            "hideLabel": true,
            "tableView": false,
            "values": [
                {
                    "label": "Option 1",
                    "value": "option1",
                    "shortcut": ""
                },
                {
                    "label": "Option 2",
                    "value": "option2",
                    "shortcut": ""
                }
            ],
            "validate": {
                "required": true
            },
            "key": "radio",
            "type": "radio",
            "input": true
        }
    ]
}

[brendanbond]

Thanks @pboucher1960, although will you try to reproduce on the newest version of the sandbox? I'm not seeing the same behavior.

[pboucher1960]

I just tried to reproduce this problem with the latest form builder available at this url (https://formio.github.io/formio.js/app/builder.html).

The design section of the form shows the radio component with the asterix positioned on the right of the radio component label, but the label is supposed to be hiden as the "Hide label" was set to true.

But the rendered version of the form shows exactly what the problem is:

[daneformio]

We have created a ticket for this issue: FIO-8009