DropDownButton width(Drop event)

2 posts, 0 answers
  1. Paulo Goncalves
    Paulo Goncalves avatar
    26 posts
    Member since:
    Aug 2004

    Posted 30 Mar 2012 Link to this post

    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" %><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>
  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 04 Apr 2012 Link to this post

    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
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top