I have a custom skin. I want to replace radcombobox with asp:dropdownlist.
I have following setting
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.
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
0
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:
Kind regards,
Bozhidar
the Telerik team
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"><html xmlns="http://www.w3.org/1999/xhtml"><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
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.
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
Hello,
I was wondering why you should use
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
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"><html xmlns="http://www.w3.org/1999/xhtml"><html xmlns="http://www.w3.org/1999/xhtml"><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.