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

Combobox input width not working as expected

0 Answers 38 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Bill
Top achievements
Rank 1
Bill asked on 09 Mar 2017, 03:11 PM

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.

 

No answers yet. Maybe you can help?

Tags
ComboBox
Asked by
Bill
Top achievements
Rank 1
Share this question
or