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.