RadioButtonList Misaligned columns

5 posts, 1 answers
  1. Keith
    Keith avatar
    105 posts
    Member since:
    Mar 2015

    Posted 28 Nov 2016 Link to this post

    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

  2. Rumen
    Admin
    Rumen avatar
    12945 posts

    Posted 29 Nov 2016 Link to this post

    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.
  3. Keith
    Keith avatar
    105 posts
    Member since:
    Mar 2015

    Posted 29 Nov 2016 in reply to Rumen Link to this post

    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

  4. Answer
    Rumen
    Admin
    Rumen avatar
    12945 posts

    Posted 29 Nov 2016 Link to this post

    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.
  5. Keith
    Keith avatar
    105 posts
    Member since:
    Mar 2015

    Posted 29 Nov 2016 in reply to Rumen Link to this post

    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

Back to Top