Paulo Goncalves
Top achievements
Rank 2
Rank 2
Paulo Goncalves
asked on 30 Mar 2012, 03:07 PM
Hi,
I create a new skin with stylebuilder.telerik.com, the new dropdown button is wider then others telerik buttons, the stylebuider don´t make the normal button wider I need include the width, height and padding-left at
Now the button is wider, but is a "leak" event at the begin button, for exemple if I click between first pixel until the middle the drop down not fired. The dropdow fired only at the middle to end.
The .aspx
The .css
I create a new skin with stylebuilder.telerik.com, the new dropdown button is wider then others telerik buttons, the stylebuider don´t make the normal button wider I need include the width, height and padding-left at
div.RadComboBox_BN table td.rcbArrowCell and .RadComboBox_BN td.rcbArrowCell with the same value using at style builder arrow box.
Now the button is wider, but is a "leak" event at the begin button, for exemple if I click between first pixel until the middle the drop down not fired. The dropdow fired only at the middle to end.
The .aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default1.aspx.vb" Inherits="Default3" %><br><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head runat="server"><br> <title></title><br> <link href="Skin/BN/ComboBox.BN.css" rel="stylesheet" type="text/css" /><br></head><br><body><br> <form id="form1" runat="server"><br> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"><br> <Scripts><br> <asp:ScriptReference Assembly="Telerik.Web.UI" <br> Name="Telerik.Web.UI.Common.Core.js"><br> </asp:ScriptReference><br> <asp:ScriptReference Assembly="Telerik.Web.UI" <br> Name="Telerik.Web.UI.Common.jQuery.js"><br> </asp:ScriptReference><br> <asp:ScriptReference Assembly="Telerik.Web.UI" <br> Name="Telerik.Web.UI.Common.jQueryInclude.js"><br> </asp:ScriptReference><br> </Scripts><br> </telerik:RadScriptManager><br> <div><br> <telerik:RadComboBox ID="RadComboBoxPeriodo1" Runat="server" EnableEmbeddedSkins="False" skin="BN" ShowDropDownOnTextboxClick ="true"> <br> </telerik:RadComboBox><br> </div><br> </form><br></body><br></html><br>The .css
/* RadComboBox Simple skin */<br><br>/*global*/<br><br>.RadComboBox_BN,<br>.RadComboBox_BN .rcbInput,<br>.RadComboBoxDropDown_BN<br>{<br> font: 12px "Segoe UI", Arial, sans-serif;<br> color: #333;<br>}<br><br>/* combobox */<br><br>div.RadComboBox_BN table td.rcbInputCell<br>{<br> height: 18px;<br> line-height: 18px;<br> border: solid #616161;<br> background: #fff;<br>}<br><br>* html div.RadComboBox_BN table td.rcbInputCell<br>{<br> height /**/: 20px;<br> line-height /**/: 20px;<br>}<br><br>div.RadComboBox_BN table td.rcbInputCellLeft { border-width: 1px 0 1px 1px; }<br>div.RadComboBox_BN table td.rcbInputCellRight { border-width: 1px 1px 1px 0; }<br><br>* html div.RadComboBox_BN .rcbInputCell .rcbInput<br>{<br> height /**/: 16px;<br> padding /**/: 2px 0; /* This should fix the ajax introduced height in IE7 and not break IE6 */<br>}<br><br>.RadComboBox_BN .rcbInputCell .rcbEmptyMessage<br>{<br> color: #666;<br>}<br><br>.RadComboBox_BN .rcbHovered .rcbInputCell .rcbInput,<br>.RadComboBox_BN .rcbFocused .rcbInputCell .rcbInput { color: #882501; }<br><br>div.RadComboBox_BN .rcbReadOnly .rcbArrowCellLeft,<br>div.RadComboBox_BN .rcbArrowCellHidden.rcbArrowCellLeft { border-width: 1px 0 1px 1px; }<br>div.RadComboBox_BN .rcbReadOnly .rcbArrowCellRight,<br>div.RadComboBox_BN .rcbArrowCellHidden.rcbArrowCellRight { border-width: 1px 1px 1px 0; }<br><br>div.RadComboBox_BN table td.rcbArrowCell<br>{<br> border: 1px solid #616161;<br> background: #fff url('ComboBox/rcbSprite.png') no-repeat -1px 50%;<br> width: 30px;<br> height: 33px;<br> padding-left: 15px;<br>}<br><br>.RadComboBox_BN td.rcbArrowCell { <br> background-position: -1px 50%; <br> width: 30px;<br> height: 33px;<br> padding-left: 15px;<br> }<br><br>.RadComboBox_BN .rcbHovered .rcbArrowCell { background-position: -35px 50%; }<br>.RadComboBox_BN .rcbFocused .rcbArrowCell { background-position: -69px 50%; }<br>.RadComboBox_BN .rcbDisabled .rcbArrowCell { background-position: -1px 50%; }<br><br>.RadComboBox_BN .rcbReadOnly td.rcbArrowCell { background-position: -2px 50%; }<br>.RadComboBox_BN .rcbHovered .rcbReadOnly .rcbArrowCell { background-position: -36px 50%; }<br>.RadComboBox_BN .rcbFocused .rcbReadOnly .rcbArrowCell { background-position: -70px 50%; }<br>.RadComboBox_BN .rcbDisabled .rcbReadOnly .rcbArrowCell { background-position: -2px 50%; }<br><br>.RadComboBox_BN td.rcbArrowCellHidden,<br>.RadComboBox_BN .rcbHovered td.rcbArrowCellHidden,<br>.RadComboBox_BN .rcbFocused td.rcbArrowCellHidden,<br>.RadComboBox_BN .rcbReadOnly td.rcbArrowCellHidden,<br>.RadComboBox_BN .rcbHovered .rcbReadOnly .rcbArrowCellHidden,<br>.RadComboBox_BN .rcbFocused .rcbReadOnly .rcbArrowCellHidden,<br>.RadComboBox_BN .rcbDisabled .rcbReadOnly .rcbArrowCellHidden,<br>.RadComboBox_BN table.rcbDisabled td.rcbArrowCellHidden { background: none; }<br><br><br>.RadComboBox_BN .rcbHovered .rcbArrowCell,<br>.RadComboBox_BN .rcbHovered .rcbReadOnly .rcbInputCell,<br>.RadComboBox_BN .rcbHovered .rcbReadOnly .rcbArrowCellHidden { background-color: #ffe79c; }<br>.RadComboBox_BN .rcbFocused .rcbArrowCell,<br>.RadComboBox_BN .rcbFocused .rcbReadOnly .rcbInputCell,<br>.RadComboBox_BN .rcbFocused .rcbReadOnly .rcbArrowCellHidden { background-color: #ffa517; }<br><br>div.RadComboBox_BN .rcbHovered .rcbArrowCell,<br>div.RadComboBox_BN .rcbHovered .rcbInputCell { border-color: #c98400; }<br>div.RadComboBox_BN .rcbFocused .rcbArrowCell,<br>div.RadComboBox_BN .rcbFocused .rcbInputCell { border-color: #ca4b0c; }<br>div.RadComboBox_BN .rcbDisabled .rcbArrowCell,<br>div.RadComboBox_BN .rcbDisabled .rcbInputCell { border-color: #b0b0b0; }<br><br>div.RadComboBox_BN .rcbArrowCell a<br>{<br> height: 20px;<br>}<br><br>div.RadComboBox_BN td.rcbArrowCellHidden,<br>div.RadComboBox_BN .rcbArrowCellHidden a<br>{<br> width: 1px;<br>}<br><br>div.RadComboBox_BN td.rcbArrowCellHidden.rcbArrowCellRight<br>{<br> border-left: 0;<br>}<br><br>/* Read-only styles */<br><br>/* dropdown */<br><br>.RadComboBoxDropDown_BN<br>{<br> background: #fff;<br> border-color: #616161;<br>}<br><br>.RadComboBoxDropDown_BN .rcbHeader,<br>.RadComboBoxDropDown_BN .rcbFooter<br>{<br> background: #e4e4e4;<br> color: #000;<br>}<br><br>.RadComboBoxDropDown_BN .rcbHeader<br>{<br> border-bottom-color: #7c7c7c;<br>}<br><br>.RadComboBoxDropDown_BN .rcbFooter<br>{<br> border-top-color: #7c7c7c;<br>}<br><br>.RadComboBoxDropDown_BN .rcbItem em<br>{<br> background: #e5e5e5;<br>}<br><br>div.RadComboBoxDropDown_BN .rcbHovered<br>{<br> background: #ffe79c;<br> color: #882501;<br> border: 1px solid #c98400;<br> padding: 1px 5px;<br>}<br><br>.RadComboBoxDropDown_BN .rcbCheckAllItems,<br>.RadComboBoxDropDown_BN .rcbCheckAllItemsHovered {<br> color: #000000;<br> background-color: #ffe79c;<br>}<br>.RadComboBoxDropDown_BN .rcbCheckAllItemsHovered {<br> color: #000000;<br>}<br><br>.RadComboBoxDropDown_BN .rcbSeparator<br>{<br> color: #fff;<br> background: #8a8a8a;<br>}<br><br>.RadComboBox_BN .rcbDisabled .rcbInputCell .rcbInput,<br>.RadComboBoxDropDown_BN .rcbDisabled<br>{<br> color: #787777;<br>}<br><br>.RadComboBoxDropDown_BN .rcbLoading<br>{<br> background: #f0f0f0;<br>}<br><br>.RadComboBoxDropDown_BN .rcbMoreResults<br>{<br> border-top-color: #c3c3c3;<br> background: #e4e4e4;<br> color: #8a8a8a;<br>}<br><br>.RadComboBoxDropDown_BN .rcbMoreResults a<br>{<br> background: url('ComboBox/rcbSprite.png') no-repeat -1px -85px;<br>}<br><br> div.RadComboBox_BN .rcbArrowCell {<br> background-position: -1px 50%;<br> width: 30px;<br> height: 33px;<br> padding-left: 15px;<br>}<br><br> div.RadComboBox_BN .rcbHovered .rcbArrowCell {<br> width: 30px;<br> height: 33px;<br> padding-left: 15px;<br> background-position: -35px 50%;<br>}<br><br> div.RadComboBox_BN .rcbFocused .rcbArrowCell {<br> width: 30px;<br> height: 33px;<br> padding-left: 15px;<br> background-position: -69px 50%;<br>}<br><br> div.RadComboBox_BN .rcbDisabled .rcbArrowCell {<br> width: 30px;<br> height: 33px;<br> padding-left: 15px;<br> background-position: -1px 50%;<br>}<br><br><br><br>1 Answer, 1 is accepted
0
Hello,
In order to help you resolve this problem, please open a support ticket and provide a runnable sample which could be tested locally. Also include all the necessary custom styles and images.
Kind regards,
Dimitar Terziev
the Telerik team
In order to help you resolve this problem, please open a support ticket and provide a runnable sample which could be tested locally. Also include all the necessary custom styles and images.
Kind regards,
Dimitar Terziev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.