Setting Height of Selectbox (Combobox) in IE

Working with Internet Explorer and creating web pages that behaves same in IE has always been frustrating for many web developers. One way of tackling IE problem is to create IE-Specific Stylesheet and thus it helps in avoiding breaking of design in IE. While working on one of the requirement I had to set height of selectboxes on the webpage. Normally for setting up height of any html component we apply stylesheet. For example:
select { height: 50px; }
Code language: CSS (css)
The above technique work for most of the browsers except Internet Explorer. The combo box does not take the height specified in CSS and is displayed with the default height only. I tried searching Internet to see if there are some IE Specific Hacks to increase the height of the listbox. But I couldn’t find a useful fix. Finally I end up using a workaround of fixing height issue of selectbox in IE. Just increase font size of the select box and that will increase size of it.
select { font-size: 15px; }
Code language: CSS (css)
The above workaround is working for me. If you find any other useful trick for this problem please share it by comment on this article.

View Comments

  • It seems to be related with the IE0s *has-layout* flag.
    If found that it works, if the width is given, too.
    select {
    height: 120px;
    width: 120px;
    }

  • Increasing the font size of combo box in ie7 makes a difference in look and feel of the page.. I wanted to know if there is any other alternative with which the combo box height can be fixed and text written in it also will be same as the text in other boxes..

  • You can work around with the padding assignment on in CSS:

    form.register select {
    width:250px;
    padding: 3px 0px 3px 0px;
    }

    The only issue I had come along with this is that the select-button won't scale with the size.
    Tested on newest versions of Firefox, IE and Chrome.

Share
Published by
Gaurav Patel
Tags: CSS internet explorer

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

5 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

5 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

5 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

5 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

5 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

5 years ago