I am currently having an issue with an asp.net dropdown list that has a css class with the following markup:
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
To align a label next to this dropdown, I added another css class:
.inlineControl {
display: inline-block;
vertical-align: middle;
}
The dropdown control includes both classes in its cssClass property, with inlineControl being last to override the form-control class's display: block. However, when viewing it in the browser, the label appears above the dropdown instead of beside it. Upon inspecting the developer tools f12, it shows that the inlineControl class is indeed overriding the form-control class and the display should be inline-block. The computed window also confirms this change.
The markup for the controls looks like this:
<div>
<label>לקוח</label>
<asp:DropDownList ID="comboClients" runat="server" CssClass="form-control inlineControl" DataTextField="ClientName" DataValueField="ClientId">
What might be causing the controls to still display as block and what steps can I take to correct this so they appear inline?