Combobox input width not working as expected

1 posts, 0 answers
  1. Bill
    Bill avatar
    9 posts
    Member since:
    Aug 2014

    Posted 09 Mar 2017 Link to this post

    I have a Textbox and a combobox in a table. The textbox sits directly above the combobox. Both have their width set to 100% however the combobox is not displaying at 100%. I had to create a custom skin file to completely hide the dropdown arrow but it seems like there is still some space being taken up on the right side of the combo that I cannot get rid of.

    The textbox is defined as:

    <asp:TextBox ID="pre_staffTB" AutoCompleteType="Disabled" runat="server" Width="100%"  Height="30px" Visible="false" style="margin-left: 5px; margin-right: 5px;"></asp:TextBox>

    The Style for the textbox is:

    input {
        padding:3px;
        margin: 0;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        border-radius:4px;
        -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
        -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
        background: #EDF4FF;
        color:#0146ad;
        border:none;
        outline:none;
        display: inline-block;
        text-indent: 3px;
        cursor:pointer;
        box-shadow: inset -3px 3px 3px rgba(0, 0, 0, 0.10), inset 3px -3px 3px rgba(0, 0, 0, 0.10);
        cursor: text;
    }

    The Combo is defined as:

    <telerik:RadComboBox ID="teamLeadCombo" runat="server" DataTextField="full_name" DataValueField="id" DataSourceID="teamPersonSource" Width="100%" CheckBoxes="True" CheckedItemsTexts="DisplayAllInInput" ShowToggleImage="False" EmptyMessage="Select Team Leader(s)..." NoWrap="True" AppendDataBoundItems="True" Sort="Ascending" CssClass="RCBClass"></telerik:RadComboBox>

    The styles for the combo are:

            div.RCBClass .rcbInputCell INPUT.rcbInput {
                margin: 0;
                -webkit-border-radius:4px;
                -moz-border-radius:4px;
                border-radius:4px;
                -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
                -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
                background: #EDF4FF;
                color:#0146ad;
                border:none;
                outline:none;
                display: inline-block;
                font-size: medium;
                text-indent: 3px;
                cursor:pointer;
                box-shadow: inset -3px 3px 3px rgba(0, 0, 0, 0.10), inset 3px -3px 3px rgba(0, 0, 0, 0.10);
                height: 30px;
                left: 0;
                right: 0;
                font-family: Arial !important;
            }
            div.RadComboBox_Default .rcbInputCellLeft,
            div.RadComboBox_Default .rcbInputCellRight,
            div.RadComboBox_Default .rcbArrowCellLeft,
            div.RadComboBox_Default .rcbArrowCellRight
            {
                background-image: url(../images/Default.gif);
            }

            div.RCBClass .td.rcbArrowCellRight {
                background-position: -156px -88px;
                background-color: white;
            }

    Any idea how to get these two elements to be the same width? I have a design constraint to keep all widths in percentages rather than direct pixel specs.

     

Back to Top