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

RadioButtonList size

10 Answers 575 Views
RadioButtonList
This is a migrated thread and some comments may be shown as answers.
Omar
Top achievements
Rank 3
Iron
Iron
Iron
Omar asked on 13 Mar 2021, 12:03 AM

Hi,

I am increasing the font size for RadRadioButtonList, but the radio circle remain small. see attached image.

Is there a way to increase the size of the radio button?

Regards,

Omar

10 Answers, 1 is accepted

Sort by
0
Omar
Top achievements
Rank 3
Iron
Iron
Iron
answered on 13 Mar 2021, 09:24 PM
Sorry forgot to attach the file. on my previous message.
0
Omar
Top achievements
Rank 3
Iron
Iron
Iron
answered on 17 Mar 2021, 09:30 AM
Anyone that can help??????????????????
1
Vessy
Telerik team
answered on 17 Mar 2021, 11:36 AM

Hi Omar,

In order to utilize the RadButtonList elastic capabilities you have to make sure that the render mode of the control is Lightweight and to set the font-size of the whole button list wrapper:

https://docs.telerik.com/devtools/aspnet-ajax/controls/radiobuttonlist/mobile-support/elastic-design

Is this the approach that you are applying? Can you share the setup that lead to the attached image result?

Regards,
Vessy
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 3
Iron
Iron
Iron
answered on 17 Mar 2021, 04:45 PM

That was easy to be done.

Many thanks for the help.

0
Omar
Top achievements
Rank 3
Iron
Iron
Iron
answered on 17 Mar 2021, 04:57 PM

Hi,

It did not work,

<head runat="server">
    <title></title>
    <style type="text/css">
        .RadRadioButtonList button {
            font-size: 26px;
        }
    </style>
     
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        </div>
       
        <telerik:RadRadioButtonList ID="RadRadioButtonList1"  runat="server"  AutoPostBack="False" Height="196px"  Skin="MetroTouch">   
            <Items>
                <telerik:ButtonListItem Text="Sample1" Value="1"  />
                <telerik:ButtonListItem Text="Sample2" Value="2" />
                <telerik:ButtonListItem Text="Sample3" Value="3" />
            </Items>
        </telerik:RadRadioButtonList>
    </form>
</body>
</html>

 

Above is an example, even if I view it in mobile the font dose not change. And if I increase the font the radio icon stay small.

Any idea please.

0
Omar
Top achievements
Rank 3
Iron
Iron
Iron
answered on 18 Mar 2021, 06:41 AM

Its not in the code but I did add the render mode

RenderMode="Lightweight" 

But still did not work, any tips please.

1
Vessy
Telerik team
answered on 18 Mar 2021, 02:57 PM

Hi Omar,

You are right - for some reason the RadioButtonList in the provided sample is not fully elastic. I have logged this issue for a further investigation (you can track it here), meanwhile, you can use the following workaround:

    <style type="text/css">
        .RadRadioButtonList button,
        .RadRadioButtonList button .rbIcon:before {
            font-size: 26px;
        }

            .RadRadioButtonList button .rbIcon {
                padding-top: 0.4em;
            }

        html .RadButton.rbCheckBox .rbIcon,
        html .RadButton.rbToggleButton .rbIcon,
        html .RadButton.rbRadioButton .rbIcon {
            margin: 0 1.2em 0 0;
        }
    </style>

Your Telerik Points also were updated.

Regards,
Vessy
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 3
Iron
Iron
Iron
answered on 18 Mar 2021, 07:41 PM

Hi,

Many thanks for the workaround tip.

Regards,

Omar

1
Vessy
Telerik team
answered on 19 Mar 2021, 07:53 AM

Hi,

You are welcome, Omar - let us know whenever any further issue with our controls occurs.

Regards,
Vessy
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 3
Iron
Iron
Iron
answered on 19 Mar 2021, 03:15 PM

Will do.

Many thanks,

Omar

Tags
RadioButtonList
Asked by
Omar
Top achievements
Rank 3
Iron
Iron
Iron
Answers by
Omar
Top achievements
Rank 3
Iron
Iron
Iron
Vessy
Telerik team
Share this question
or