Fix misalignment issue with RadRadioButtonList

RELATED TO:

AUTHOR: Rumen Zhekov

DATE POSTED: March 22, 2018

PROBLEM

You may experience an issue with misaligned list elements as in the picture below:

Missalignement_Issue
This article shows how to deal with such a problem and fix it.

SOLUTION
Тhe radio buttons alignment can be controlled with the class below:

<style>
    .RadRadioButtonList.rbHorizontalList .RadRadioButton {
        min-width: 120px;
        border: 1px solid red;
        text-align: left;
    }
</style>

Update the value of the min-width property depending on the list text length.
Don't forget to remove the border since it is just a helper that renders grid lines between the buttons.

Here is the complete solution:

<style>
    .RadRadioButtonList.rbHorizontalList .RadRadioButton {
        min-width: 120px;
        border: 1px solid red;
        text-align: left;
    }
</style>
<telerik:RadRadioButtonList runat="server" ID="RadRadioButtonList1" Direction="Horizontal" Width="360px" Columns="3" >
    <Items>
        <telerik:ButtonListItem Text="Part Type" Value="Part Type" />
        <telerik:ButtonListItem Text="OVL DOH" Value="OVL DOH" />
        <telerik:ButtonListItem Text="DOH Warehouse" Value="DOH Warehouse" />
        <telerik:ButtonListItem Text="Program #" Value="Program #" />
        <telerik:ButtonListItem Text="Press Line" Value="Press Line" />
        <telerik:ButtonListItem Text="Tier" Value="Tier" />
    </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.