set asp:dropdownlist font size by radformdecorator

4 posts, 0 answers
  1. Mac P
    Mac P avatar
    84 posts
    Member since:
    Mar 2010

    Posted 16 Sep 2012 Link to this post

    I have a custom skin. I want to replace radcombobox with asp:dropdownlist.

    I have following setting
    <telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="Select" />

    It works fine but i want to change the font size of dropdownlist. For that i am using following style but it doesn't work. What else am i missing.
    <style type="text/css">
           .rfdSelect_SkinName .rfdSelectOuter
           {
               font: 12px "Segoe UI" , Arial, sans-serif !important;
           }
       </style>



  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 17 Sep 2012 Link to this post

    Hello,

    With a an additional CSS line fir the LI element that is in the dropdown list when it is decorated, it works as expected on my side:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .rfdSelect_Default .rfdSelectOuter,
            .rfdSelectBox_Default li {
                font: bold 13px Verdana , Arial, sans-serif !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="Select" />
            <asp:DropDownList ID="ddl" runat="server">
                <asp:ListItem Text="Item 1"></asp:ListItem>
                <asp:ListItem Text="Item 2"></asp:ListItem>
                <asp:ListItem Text="Item 3"></asp:ListItem>
                <asp:ListItem Text="Item 4"></asp:ListItem>
            </asp:DropDownList>
        </form>
    </body>
    </html>


    Kind regards,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mac P
    Mac P avatar
    84 posts
    Member since:
    Mar 2010

    Posted 17 Sep 2012 Link to this post

    Thanks for the reply. Font worked fine. However i have couple of issues.
    1) list item is always aligned at the top in dropdown box.
    2) There is offset between dropdown list and the dropdown box.

    Please see attached image.
    <style type="text/css">
         .rfdSelect_Default .rfdSelectOuter,
         .rfdSelectBox_Default li {
            font: 12px "Segoe UI" , Arial, sans-serif !important;
           color: #333 !important;
            vertical-align:baseline !important;
         }
     
     </style>

  5. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 18 Sep 2012 Link to this post

    Hello,

    I was wondering why you should use font: 12px "Segoe UI" , Arial, sans-serif !important; as this is the default style coming from the base stylesheet and it does not have to be overridden with the same style, it is pointless. If you remove it, and remove the vertical-align: baseline, the first issue will be fixed. If you want to keep it, you could try the following fix:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .rfdSelect_Default .rfdSelectOuter,
            .rfdSelectBox_Default li {
                font: 12px "Segoe UI" , Arial, sans-serif !important;
                color: #333 !important;
                vertical-align: baseline !important;
            }
             
            .rfdSelect_Default .rfdSelectOuter {
                font: 12px/21px "Segoe UI" , Arial, sans-serif !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="Select" />
        <asp:DropDownList ID="ddl" runat="server">
            <asp:ListItem Text="Item 1"></asp:ListItem>
            <asp:ListItem Text="Item 2"></asp:ListItem>
            <asp:ListItem Text="Item 3"></asp:ListItem>
            <asp:ListItem Text="Item 4"></asp:ListItem>
        </asp:DropDownList>
        </form>
    </body>
    </html>

    As for the second issue, I do not experience such a problem with the above code, as you could see from the image attached RFD-GAP.jpg.

    In your case I think this issue is caused by some global stylesheet on your page that is applied to the RadForm elements. Ty to remove all your custom styles and check if the issue still exists. If you can not fix the issue, open a support ticket and send us a simple sample project with the issue reproduced to test it further on our side.

    Greetings,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
Back to Top