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

set asp:dropdownlist font size by radformdecorator

3 Answers 33 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Mac P
Top achievements
Rank 1
Mac P asked on 16 Sep 2012, 06:56 PM
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>



3 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 17 Sep 2012, 06:44 AM
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.
0
Mac P
Top achievements
Rank 1
answered on 17 Sep 2012, 02:54 PM
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>

0
Bozhidar
Telerik team
answered on 18 Sep 2012, 07:29 AM
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.
Tags
FormDecorator
Asked by
Mac P
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Mac P
Top achievements
Rank 1
Share this question
or