RadioGroup label alignment

1 Answer 112 Views
RadioGroup
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 29 Mar 2022, 02:46 PM

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

1 Answer, 1 is accepted

Sort by
0
Yanislav
Telerik team
answered on 01 Apr 2022, 11:33 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
RadioGroup
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Yanislav
Telerik team
Share this question
or