Fix Missaligned RadioButtonList icons when item is too long

RELATED TO:

AUTHOR: Peter Milchev

DATE POSTED: January 29, 2019

PROBLEM

When the RadioButtonListItem's text is longer than the listbox' width, the radio button icon is on a separate row.        

SOLUTION

Setting the width of the item's text to be a few pixels less than its original 100% width fixes the issue: 

<style>
    .RadRadioButtonList.rbVerticalList .rbRadioButton .rbText {
        width: calc(100% - 21px);
    }
</style>
<telerik:RadRadioButtonList runat="server" ID="RadCheckBoxList1" >
    <Items>
        <telerik:ButtonListItem Text="Option 1" />
        <telerik:ButtonListItem Text="Option 2Option 2Option 2Option 2Option 2Option 2Option 2Option 2Option 2" />
        <telerik:ButtonListItem Text="Option 3" />
        <telerik:ButtonListItem Text="Option 4" />
        <telerik:ButtonListItem Text="Option 5" />
    </Items>
</telerik:RadRadioButtonList>

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.