10 Answers, 1 is accepted
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.
That was easy to be done.
Many thanks for the help.
Hi,
It did not work,
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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.
Its not in the code but I did add the render mode
RenderMode="Lightweight"
But still did not work, any tips please.
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/.
Hi,
Many thanks for the workaround tip.
Regards,
Omar
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/.
Will do.
Many thanks,
Omar