RadioButtonList need more space between the rows of items

[Keith]

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

[Patrick | Technical Support Engineer, Senior]

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

[Keith]

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

[Patrick | Technical Support Engineer, Senior]

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

[Keith]

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

[Patrick | Technical Support Engineer, Senior]

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

[Brad]

I have tried this every which way from wednesday and still cannot get the style to actually change the styling.

If I inspect the list and change the style padding parameter to what I want it works.  however I cannot get it to work by adding the style to the CSS.

Where do you directly edit the css attached to the control?

 

 

[Peter Milchev]

Hello Brad,

Depending on where you declare your style, the default styles might override the custom ones due to style specificity. Generally, you can find the exact styles that are applying and overriding the padding by following the first two points of the following blogpost: 

• https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools

To make the custom style more specific, "stronger", you can use the same style selector and add "html body " in front of it. More on CSS specificity you can find here: 

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

<style>
    .RadRadioButtonList .RadRadioButton.rbRadioButton:not(:last-of-type) {
        padding-bottom: 40px;
    }
</style>
<telerik:RadRadioButtonList runat="server" ID="Questionnaire" AutoPostBack="false" CssClass="content">
    <Items>
        <telerik:ButtonListItem Text="Game apps (puzzles, charades, etc.)" Value="0" />
        <telerik:ButtonListItem Text="Sports apps (sports schedules, scores, headlines, etc.)" Value="1" />
    </Items>
</telerik:RadRadioButtonList>

Regards,
Peter Milchev
Progress Telerik