This is a migrated thread and some comments may be shown as answers.

RadioButtonList Misaligned columns

11 Answers 143 Views
Button
This is a migrated thread and some comments may be shown as answers.
Keith
Top achievements
Rank 1
Keith asked on 28 Nov 2016, 04:03 PM

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

11 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 29 Nov 2016, 12:44 PM
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
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
0
Keith
Top achievements
Rank 1
answered on 29 Nov 2016, 02:19 PM

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

0
Accepted
Rumen
Telerik team
answered on 29 Nov 2016, 03:39 PM
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
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
0
Keith
Top achievements
Rank 1
answered on 29 Nov 2016, 09:11 PM

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

0
Omar
Top achievements
Rank 1
Veteran
Iron
answered on 18 Mar 2021, 08:41 PM

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

 

 

0
Rumen
Telerik team
answered on 19 Mar 2021, 08:16 AM

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

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.

0
Omar
Top achievements
Rank 1
Veteran
Iron
answered on 19 Mar 2021, 03:16 PM

Perfect!

Many thanks Rumen.

Regards,

Omar

0
Omar
Top achievements
Rank 1
Veteran
Iron
answered on 19 Mar 2021, 03:45 PM

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

0
Rumen
Telerik team
answered on 23 Mar 2021, 10:45 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Omar
Top achievements
Rank 1
Veteran
Iron
answered on 24 Mar 2021, 04:09 PM

Forgot to thank you for the excellent help.

Thank you,

Omar

0
Rumen
Telerik team
answered on 24 Mar 2021, 04:11 PM

You are very welcome, Omar!

 

Regards,
Rumen
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
Button
Asked by
Keith
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Keith
Top achievements
Rank 1
Omar
Top achievements
Rank 1
Veteran
Iron
Share this question
or