RadioGroup label alignment

[AP]

I have a form with quite a few yes/no radio button groups, split up into sections with divs (bootstrap cards). Each radiobutton is horizontally aligned, and has a label in the form of a span before it.

 <p>
                <span class="lbllabel1">Front page documentation complete?:</span>


                @(Html.Kendo().RadioGroupFor(m=>m.FrontPageComplete)
        .Name("FrontPageComplete")
        .Layout(RadioGroupLayout.Horizontal)
            .Items(i =>
            {
                i.Add().Label("No").Value("No");
                i.Add().Label("Yes").Value("Yes");


            })

        )

            </p>

The lbllabel1 class is defined as:-

.lbllabel1 {
    float: left;
    font-size: small;
    font-weight: normal;
    width: 28.0em;
    text-align: right;
    clear: left;
    margin-right: 5px;
    padding-top: 5px;
}

In most cases the labels vertically align well,  but the first entry in each div is misaligned (picture attached). How can I ensure proper alignment to teh radiogroup?

Thanks

[Yanislav]

Hello Andrew,

In order to align an element with the RadioGroup, I recommend the following approach :

1. Wrap the elements in a parent element (for the example, is used 'section' element) :

<section class="wrapper" style="width:20%">
    <span>My label: </span>
    @(Html.Kendo().RadioGroup()
        .Name("FrontPageComplete")
        .Layout(RadioGroupLayout.Horizontal)
            .Items(i =>
            {
                i.Add().Label("Yes").Value("Yes");
                i.Add().Label("No").Value("No");
            }))
</section>

And apply the following CSS rules to the wrapper in order to align its children :

<style>
    .wrapper{
        display:flex;
        align-items:center;
        gap:15px
    }
</style>

I hope this helps!

Regards,
Yanislav
Progress Telerik