RadioButtonList need more space between the rows of items

6 posts, 1 answers
  1. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 28 Oct Link to this post

    I have a RadioButtonList on an ASP.Net page with VB.net as the code-behind.

    The RadioButtonList has 4 items with 2 columns.  Originally I had it set up where RepeatDirection is Horizontal and Direction is Horizontal. 

    The problem I am having is that the 2 rows of the items are too close together.  That especially is a problem when displaying the page on a 10.1" tablet in portrait position because it makes it really hard to select an item in the second row.

    Changing the RepeatDirection and Direction to Vertical helped to give more space which looks on a PC and a 10.1" tablet in landscape position.  But it is still too close on a 10.1" tablet in portrait position.

    I have tried using "padding" in CSS for the RadioButtonList but that only changes the spacing around the RadioButtonList.

    Please help me with this.

    Here is my RadioButtonList:

    <telerik:RadRadioButtonList runat="server" ID="rrblSortBy" RepeatDirection="Vertical" RenderMode="Lightweight" AutoPostBack="False" Direction="Vertical" Skin="Glow" Columns="2" SelectedIndex="0" SelectedValue="Supplier">
        <Items>
            <telerik:ButtonListItem Selected="True" Text="Supplier" Value="Supplier" />
            <telerik:ButtonListItem Text="Serial No." Value="Serial No." />
            <telerik:ButtonListItem Text="RSDC Part No." Value="RSDC Part No." />
            <telerik:ButtonListItem Text="Customer" Value="Customer" />
        </Items>
    </telerik:RadRadioButtonList>

     

    Sincerely,

    Keith Jackson

  2. Answer
    Patrick
    Admin
    Patrick avatar
    172 posts

    Posted 31 Oct Link to this post

    Hi Keith,

    You can use CSS to set the margin of your RadRadioButtonList.
    <style type="text/css">
        .rbVerticalList button.RadButton.rbRadioButton{
            margin-right: 20px;
        }
    </style>

    Hope that helps!

    Regards,
    Patrick
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 01 Nov in reply to Patrick Link to this post

    Thanks for your response Patrick!

    I have tried that and still did not work.  Even if I add "!important" to it, it still did not work.

    I have even tried removing "Columns" from the RadioButtonList and still was too close together on a Samsung 10.1 Galaxy tablet in portrait position using FireFox browser.

    Any other ideas?

    Please help!

    Sincerely,

    Keith Jackson

  5. Patrick
    Admin
    Patrick avatar
    172 posts

    Posted 01 Nov Link to this post

    Hello Keith,

    I've attached a project which illustrates my previous response.  You can change the amount of pixels in the CSS to your needs.  

    Hope this clears things!

    Regards,
    Patrick
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  6. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 01 Nov in reply to Patrick Link to this post

    Hi Patrick,

        Thanks for your help!  

        But I think you misunderstood the problem that I was facing.  It is not the space side to side between the items that it was too close.  It was the space top to bottom between the items that it was too close on a Samsung 10.1" Galaxy tablet in portrait position.  I found that out by increasing margin-right to 150px so I can see the difference and noticed that the items were going further apart side to side.

        I have changed margin-right to margin-bottom and set it to 20px.  Now I can see that they are not so close together from top to bottom.

        Thanks for at least providing the CSS to use for this!  That helped to point me in the right direction.

        But that CSS you provided is not in the documentation.  If it is then please provide the link because I do not see it in the RadioButtonList documentation or the documentation for the RadButton. That is not the only CSS I have not found in the documentation. The following CSS was not in the documentation either:

    .RadRadioButton span.rbText.rbToggleRadio {
        color: white;
        font-size: 0.75vw !important;
    }
    .RadRadioButton span.rbText.rbToggleRadioChecked {
        color: white;
        font-size: 0.75vw !important;
    }

     

    I found that CSS because I needed to change the color of the text of the items in the RadioButtonList and Loic posted that for me in this forum.

    I suggest that you get the documentation updated.

    Thanks for your help!

    Sincerely,

    Keith Jackson

  7. Patrick
    Admin
    Patrick avatar
    172 posts

    Posted 01 Nov Link to this post

    Hi Keith,

    I found the CSS classes via inspecting the element.  Once I knew what the class was, I was able to style the element.  

    Referring to CSS, it is not a product of Telerik and, therefore, is not included in our documentation.  But I can give you some great sites which might help as a reference:

    W3schools
    MDN
    About Google Chrome DevTools

    I hope this information helps!

    Regards,
    Patrick
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017