0

How do I vertically align a text in a asp.net dropdownlist control? I researched the web and found several proposed solutions with padding etc. but none seem to work. This is my code.

 <asp:DropDownList ID="DropDownList1" runat="server" CssClass="dropdown">
    <asp:ListItem>sds</asp:ListItem>
    <asp:ListItem>ddd</asp:ListItem>
    <asp:ListItem>xxx</asp:ListItem>
    </asp:DropDownList>

CSS:

.dropdown
{
    height: 35px;
    background-color: Blue;
    font-size: 15px;
    padding-top: 10px;
    padding-bottom: 10px;    
}
user2974961
  • 335
  • 1
  • 6
  • 14

2 Answers2

0

Add line-height equal to the height:

.dropdown {
    height: 35px;
    line-height: 35px;
    ...
}
Abhitalks
  • 27,721
  • 5
  • 58
  • 81
  • did you remove the padding? – Abhitalks Jan 05 '14 at 14:59
  • I tried both with padding and without and none work. .dropdown { height: 35px; line-height: 35px; background-color: Blue; font-size: 15px; padding-top: 10px; padding-bottom: 10px; } .dropdown { height: 35px; line-height: 35px; background-color: Blue; font-size: 15px; } – user2974961 Jan 05 '14 at 15:09
  • the issue is on IE (aligns to the bottom) and with Firefox (aligns to the top). On Chrome it Works fine. – user2974961 Jan 05 '14 at 15:14
  • Check this fiddle: http://jsfiddle.net/yvZmC/ ; Must be some style being applied from elsewhere. Try creating a reset skin for the control. – Abhitalks Jan 05 '14 at 15:17
  • This is quite interesting. Acessing the link you sent it really works. So I copied the exact same code of yours into an htm file into my Visual Studio. When I ran it through Visual Studio "Play" button and it opens as http://localhost:3420/htmlStyles2.htm it still does not work! On the other hand when I access the exact same file directly on the browser double clicking it (C:\Test\htmlStyles2.htm) it works!!! So the problem seems to be with access through Visual Studio localhost. Any clue on why that might be happening? Thanks! – user2974961 Jan 05 '14 at 17:50
  • I found the issue! It's something with IE compatibility mode. Discovered that on the following link: http://stackoverflow.com/questions/4951127/odd-behaviour-in-web-page-when-page-uses-localhost-vs-machines-name?rq=1 The only thing I needed to do was to click on the compatibility mode button next to the url in IE and the alignment started working. Thanks for your help! – user2974961 Jan 06 '14 at 00:24
0

Padding will work .check out the following jsfiddle

<select class="dropdown">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

.dropdown {

background-color: Blue;
font-size: 15px;
padding-top: 10px;
padding-bottom: 10px;

}

JSFIDDLE

santosh singh
  • 27,666
  • 26
  • 83
  • 129
  • for me it does not work. tried your example and continues aligned to the bottom, not to the middle/center. – user2974961 Jan 05 '14 at 14:40
  • seems css is ignoring padding instructions on dropdownlist/select elements. On the other hand it works well for texbox/input type="text". – user2974961 Jan 05 '14 at 14:58
  • note: padding is being ignored just on IE dropdownlist (height is just enough to fit the text). On Chrome and Firefox the original code that I posted works well. – user2974961 Jan 05 '14 at 15:17