RadioButtonList Misaligned columns

[Keith]

I have  a RadRadioButtonList on a ASP.Net page with 5 items in 3 columns.  With it set to 3 columns, the remaining 2 items go to another row which is what I would like to occur.  But what I am finding is that one of the remaining 2 items has text longer than the first item of the RadioButtonList which causes the columns to be misaligned.  Please see attached screenshot.  Note the column circled in red that is misaligned.

How do I get the columns to be aligned regardless of the length of the text?

Please help.  Thanks!

Sincerely,
Keith Jackson

[Rumen]

Hi Keith,

I tried to repro the issue but without success. You can see my test in this video: http://screencast.com/t/4cQ0KHX2DAfT.

<telerik:RadRadioButtonList runat="server" ID="RadioButtonList1" AutoPostBack="false" Layout="Flow" Columns="3">
    <Items>
        <telerik:ButtonListItem Text="Part Type 1234567" Value="1" />
        <telerik:ButtonListItem Text="Program #" Value="2" />
        <telerik:ButtonListItem Text="12345 OVL DOH" Value="3" />
        <telerik:ButtonListItem Text="Press Line" Value="4" />
        <telerik:ButtonListItem Text="DOH Warehouse" Value="5" />
        <telerik:ButtonListItem Text="Tier" Value="5" />
    </Items>
</telerik:RadRadioButtonList>

Can you please let me know how to modify the code to produce the same effect as on your end?

Best regards,
Rumen
Telerik by Progress

[Keith]

Hi Rumen,

    Thanks for your response!

    The RadRadioButtonList is in an ASP Panel within a HTML Table.  Here is the ASP.Net code for the RadRadioButtonList:

<telerik:RadRadioButtonList runat="server" ID="rrblThenBy" RepeatDirection="Horizontal" Direction="Horizontal" Width="360px" Columns="3" Skin="Glow">
    <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>

 

I have tried adding Layout="Flow" like what you did but that did not make any difference.  If I remove Layout and Direction properties then the columns are aligned but the items are being placed going vertical which causes the order of the items to be changed.  I prefer it to go Horizontal but that is not working.  With going vertical, "OVL DOH" is placed under "Part Type" instead being placed at the top of column to the right of "Part Type".  I would have to rearrange the items in the RadRadioButtonList in order to display them in the correct order.  Is there a way to go Horizontal direction and still have the columns aligned?

Sincerely,

Keith Jackson

[Rumen]

Hi,

You can control the radio buttons alignment with the class below:

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

The border is just a helper that renders grid lines between the buttons, which you should remove.
The min-width should be updated depending on the text length.

Best regards,
Rumen
Telerik by Progress

[Keith]

Hi Rumen,

     Thanks for your help!  That helped to achieve what I was looking for.  I just needed to remove the border and decrease min-width to 100px to get the text to show within the borders of the panel.

     Thanks!

Sincerely,

Keith Jackson

[Omar]

Hi,

But that do not solve the problem when you are creating the control from code behind.

As the length of the list items change dynamically its not realistic to fix the width.

Is there any other solution.

Regards,

Omar

 

 

[Rumen]

Hi Omar,

There are different approaches to handle the dynamic control creation and one of it is to dynamically modify the min-width value with an inline server expression as shown below:

ASPX

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <telerik:RadCodeBlock runat="server">
        <style>
            .RadRadioButtonList.rbHorizontalList .RadRadioButton {
                min-width: <%= SetServerWidth() %>;
                border: 1px solid red;
                text-align: left;
            }
        </style>
    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" />
      <telerik:RadRadioButtonList runat="server" ID="rrblThenBy" RepeatDirection="Horizontal" Direction="Horizontal" Width="360px" Columns="3" Skin="Glow">
            <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>
    </form>
</body>
</html>

 

Codebehind:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default4 : System.Web.UI.Page
{

    string width = "100px";
    public string SetServerWidth()
    {
        return width;
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        
    }

}

 

Regards,
Rumen
Progress Telerik

[Omar]

Perfect!

Many thanks Rumen.

Regards,

Omar

[Omar]

One more question.

I am creating few of RadRadioButtonList from code behind, and each of them have items with different widths. What I mean is each one will need to have different min-width value.

Can this be achieved without using css, like setting the min-width from code behind or any other soloution.

Regards,

Omar

[Rumen]

Hi Omar,

You can use the CssClass server property to assign a specific class with the correct min-width to the respective radio button list control on the page.

ASPX

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .RBBL1.RadRadioButtonList.rbHorizontalList .RadRadioButton {
            min-width: 100px;
            border: 1px solid red;
            text-align: left;
        }

        .RBBL2.RadRadioButtonList.rbHorizontalList .RadRadioButton {
            min-width: 110px;
            border: 1px solid green;
            text-align: left;
        }

        .RBBL3.RadRadioButtonList.rbHorizontalList .RadRadioButton {
            min-width: 120px;
            border: 1px solid blue;
            text-align: left;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" />
        <telerik:RadRadioButtonList runat="server" ID="RadRadioButtonList1" CssClass="RBBL1" RepeatDirection="Horizontal" Direction="Horizontal" Width="360px" Columns="3" Skin="Silk">
            <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>
        <telerik:RadRadioButtonList runat="server" ID="RadRadioButtonList2" CssClass="RBBL2" RepeatDirection="Horizontal" Direction="Horizontal" Width="360px" Columns="3" Skin="Silk">
            <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>

    </form>
</body>
</html>

 

Codebehind

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            RadRadioButtonList rdr = new RadRadioButtonList() { ID = "RadRadioButtonList3",
                CssClass = "RBBL3", 
                Direction = ButtonListDirection.Horizontal,
                Width = Unit.Pixel(500),
                Columns = 3,
                Skin = "Silk"
            };
            rdr.Items.Add(new ButtonListItem("AAA", "BBB"));
            rdr.Items.Add(new ButtonListItem("AAA", "BBB"));
            rdr.Items.Add(new ButtonListItem("AAA", "BBB"));
            rdr.Items.Add(new ButtonListItem("AAA", "BBB"));
            rdr.Items.Add(new ButtonListItem("AAA", "BBB"));
            rdr.Items.Add(new ButtonListItem("AAA", "CCC"));

    
            form1.Controls.Add(rdr);
        }
    }
}

 

Regards,
Rumen
Progress Telerik

[Omar]

Forgot to thank you for the excellent help.

Thank you,

Omar

[Rumen]

You are very welcome, Omar!

 

Regards,
Rumen
Progress Telerik