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

DropDownButton width(Drop event)

1 Answer 51 Views

ComboBox

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

Paulo Goncalves asked on 30 Mar 2012, 03:07 PM

rcbSprite.png

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 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" %> <%@ 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> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Skin/BN/ComboBox.BN.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI"  Name="Telerik.Web.UI.Common.Core.js"> </asp:ScriptReference> <asp:ScriptReference Assembly="Telerik.Web.UI"  Name="Telerik.Web.UI.Common.jQuery.js"> </asp:ScriptReference> <asp:ScriptReference Assembly="Telerik.Web.UI"  Name="Telerik.Web.UI.Common.jQueryInclude.js"> </asp:ScriptReference> </Scripts> </telerik:RadScriptManager> <div> <telerik:RadComboBox ID="RadComboBoxPeriodo1" Runat="server" EnableEmbeddedSkins="False" skin="BN" ShowDropDownOnTextboxClick ="true"> </telerik:RadComboBox> </div> </form> </body> </html> 

The .css

/* RadComboBox Simple skin */ /*global*/ .RadComboBox_BN, .RadComboBox_BN .rcbInput, .RadComboBoxDropDown_BN { font: 12px "Segoe UI", Arial, sans-serif; color: #333; } /* combobox */ div.RadComboBox_BN table td.rcbInputCell { height: 18px; line-height: 18px; border: solid #616161; background: #fff; } * html div.RadComboBox_BN table td.rcbInputCell { height /**/: 20px; line-height /**/: 20px; } div.RadComboBox_BN table td.rcbInputCellLeft { border-width: 1px 0 1px 1px; } div.RadComboBox_BN table td.rcbInputCellRight { border-width: 1px 1px 1px 0; } * html div.RadComboBox_BN .rcbInputCell .rcbInput { height /**/: 16px; padding /**/: 2px 0; /* This should fix the ajax introduced height in IE7 and not break IE6 */ } .RadComboBox_BN .rcbInputCell .rcbEmptyMessage { color: #666; } .RadComboBox_BN .rcbHovered .rcbInputCell .rcbInput, .RadComboBox_BN .rcbFocused .rcbInputCell .rcbInput { color: #882501; } div.RadComboBox_BN .rcbReadOnly .rcbArrowCellLeft, div.RadComboBox_BN .rcbArrowCellHidden.rcbArrowCellLeft { border-width: 1px 0 1px 1px; } div.RadComboBox_BN .rcbReadOnly .rcbArrowCellRight, div.RadComboBox_BN .rcbArrowCellHidden.rcbArrowCellRight { border-width: 1px 1px 1px 0; } div.RadComboBox_BN table td.rcbArrowCell { border: 1px solid #616161; background: #fff url('ComboBox/rcbSprite.png') no-repeat -1px 50%; width: 30px; height: 33px; padding-left: 15px; } .RadComboBox_BN td.rcbArrowCell { background-position: -1px 50%; width: 30px; height: 33px; padding-left: 15px; } .RadComboBox_BN .rcbHovered .rcbArrowCell { background-position: -35px 50%; } .RadComboBox_BN .rcbFocused .rcbArrowCell { background-position: -69px 50%; } .RadComboBox_BN .rcbDisabled .rcbArrowCell { background-position: -1px 50%; } .RadComboBox_BN .rcbReadOnly td.rcbArrowCell { background-position: -2px 50%; } .RadComboBox_BN .rcbHovered .rcbReadOnly .rcbArrowCell { background-position: -36px 50%; } .RadComboBox_BN .rcbFocused .rcbReadOnly .rcbArrowCell { background-position: -70px 50%; } .RadComboBox_BN .rcbDisabled .rcbReadOnly .rcbArrowCell { background-position: -2px 50%; } .RadComboBox_BN td.rcbArrowCellHidden, .RadComboBox_BN .rcbHovered td.rcbArrowCellHidden, .RadComboBox_BN .rcbFocused td.rcbArrowCellHidden, .RadComboBox_BN .rcbReadOnly td.rcbArrowCellHidden, .RadComboBox_BN .rcbHovered .rcbReadOnly .rcbArrowCellHidden, .RadComboBox_BN .rcbFocused .rcbReadOnly .rcbArrowCellHidden, .RadComboBox_BN .rcbDisabled .rcbReadOnly .rcbArrowCellHidden, .RadComboBox_BN table.rcbDisabled td.rcbArrowCellHidden { background: none; } .RadComboBox_BN .rcbHovered .rcbArrowCell, .RadComboBox_BN .rcbHovered .rcbReadOnly .rcbInputCell, .RadComboBox_BN .rcbHovered .rcbReadOnly .rcbArrowCellHidden { background-color: #ffe79c; } .RadComboBox_BN .rcbFocused .rcbArrowCell, .RadComboBox_BN .rcbFocused .rcbReadOnly .rcbInputCell, .RadComboBox_BN .rcbFocused .rcbReadOnly .rcbArrowCellHidden { background-color: #ffa517; } div.RadComboBox_BN .rcbHovered .rcbArrowCell, div.RadComboBox_BN .rcbHovered .rcbInputCell { border-color: #c98400; } div.RadComboBox_BN .rcbFocused .rcbArrowCell, div.RadComboBox_BN .rcbFocused .rcbInputCell { border-color: #ca4b0c; } div.RadComboBox_BN .rcbDisabled .rcbArrowCell, div.RadComboBox_BN .rcbDisabled .rcbInputCell { border-color: #b0b0b0; } div.RadComboBox_BN .rcbArrowCell a { height: 20px; } div.RadComboBox_BN td.rcbArrowCellHidden, div.RadComboBox_BN .rcbArrowCellHidden a { width: 1px; } div.RadComboBox_BN td.rcbArrowCellHidden.rcbArrowCellRight { border-left: 0; } /* Read-only styles */ /* dropdown */ .RadComboBoxDropDown_BN { background: #fff; border-color: #616161; } .RadComboBoxDropDown_BN .rcbHeader, .RadComboBoxDropDown_BN .rcbFooter { background: #e4e4e4; color: #000; } .RadComboBoxDropDown_BN .rcbHeader { border-bottom-color: #7c7c7c; } .RadComboBoxDropDown_BN .rcbFooter { border-top-color: #7c7c7c; } .RadComboBoxDropDown_BN .rcbItem em { background: #e5e5e5; } div.RadComboBoxDropDown_BN .rcbHovered { background: #ffe79c; color: #882501; border: 1px solid #c98400; padding: 1px 5px; } .RadComboBoxDropDown_BN .rcbCheckAllItems, .RadComboBoxDropDown_BN .rcbCheckAllItemsHovered { color: #000000; background-color: #ffe79c; } .RadComboBoxDropDown_BN .rcbCheckAllItemsHovered { color: #000000; } .RadComboBoxDropDown_BN .rcbSeparator { color: #fff; background: #8a8a8a; } .RadComboBox_BN .rcbDisabled .rcbInputCell .rcbInput, .RadComboBoxDropDown_BN .rcbDisabled { color: #787777; } .RadComboBoxDropDown_BN .rcbLoading { background: #f0f0f0; } .RadComboBoxDropDown_BN .rcbMoreResults { border-top-color: #c3c3c3; background: #e4e4e4; color: #8a8a8a; } .RadComboBoxDropDown_BN .rcbMoreResults a { background: url('ComboBox/rcbSprite.png') no-repeat -1px -85px; } div.RadComboBox_BN .rcbArrowCell { background-position: -1px 50%; width: 30px; height: 33px; padding-left: 15px; } div.RadComboBox_BN .rcbHovered .rcbArrowCell { width: 30px; height: 33px; padding-left: 15px; background-position: -35px 50%; } div.RadComboBox_BN .rcbFocused .rcbArrowCell { width: 30px; height: 33px; padding-left: 15px; background-position: -69px 50%; } div.RadComboBox_BN .rcbDisabled .rcbArrowCell { width: 30px; height: 33px; padding-left: 15px; background-position: -1px 50%; } 

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

DropDownButton width(Drop event)

1 Answer, 1 is accepted