Unplanned
Last Updated: 18 Mar 2021 14:57 by ADMIN
Omar
Created on: 18 Mar 2021 14:48
Category: Button
Type: Bug Report
0
RadioButtonList is not fully elastic

Setting the font size of RadioButtonsList does not change its all dimensions as stated in the following article:
https://docs.telerik.com/devtools/aspnet-ajax/controls/radiobuttonlist/mobile-support/elastic-design

Code to reproduce the issue:

<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">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
       
        <telerik:RadRadioButtonList ID="RadRadioButtonList1"  runat="server"  AutoPostBack="False" Height="196px"  Skin="MetroTouch" RenderMode="Lightweight">   
            <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>

1 comment
ADMIN
Vessy
Posted on: 18 Mar 2021 14:57

Hi Omar,

Thank you for the reported issue!

While it get fixed, 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>


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.