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

RadioButtonList need more space between the rows of items

7 Answers 852 Views
Button
This is a migrated thread and some comments may be shown as answers.
Keith
Top achievements
Rank 1
Keith asked on 28 Oct 2016, 05:19 PM

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

7 Answers, 1 is accepted

Sort by
0
Accepted
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 31 Oct 2016, 05:55 PM
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.
0
Keith
Top achievements
Rank 1
answered on 01 Nov 2016, 01:47 PM

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

0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 01 Nov 2016, 02:15 PM
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.
0
Keith
Top achievements
Rank 1
answered on 01 Nov 2016, 03:15 PM

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

0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 01 Nov 2016, 08:49 PM
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.
0
Brad
Top achievements
Rank 1
answered on 15 Jan 2020, 08:55 PM

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?

 

 

0
Peter Milchev
Telerik team
answered on 20 Jan 2020, 11:12 AM

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: 

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: 

<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

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
Tags
Button
Asked by
Keith
Top achievements
Rank 1
Answers by
Patrick | Technical Support Engineer, Senior
Telerik team
Keith
Top achievements
Rank 1
Brad
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or