?
Solved

Adjusting the height of a select dropdown box in IE

Posted on 2010-01-10
9
Medium Priority
?
1,834 Views
Last Modified: 2013-11-19
I'm trying to figure out if there's a way to control the height of a select dropdown box in IE.

The only way I've been able to do this so far is by increasing the font-size value of the select element (for IE only).  Here is the result:

http://www.coverall.com/cnaws/inforequest.aspx 

What I don't like about this approach is that the text for the different options in the dropdown box is now huge and bold, and doesn't look good at all.  

Is there any way that I can get around this problem?  Is there any way that I can control the height of the dropdown box -- while at the same time retain a smaller font size (in IE)?

I am already aware of the technique where javascript can be used to replace the select dropdown box with an ordered list (ie:  jquery.stylish-select.js).  However, .. I'm looking for a simpler solution that doesn't require any custom graphics.

Does anyone have any tips or suggestions?  

Thanks,
- Yvan
0
Comment
Question by:egoselfaxis
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
9 Comments
 
LVL 9

Expert Comment

by:darkapple
ID: 26280735
have you tried controlling through line-height property of the selectbox rather than increasing the font-size?
0
 

Author Comment

by:egoselfaxis
ID: 26282765
Yes I have.  It does not work.
0
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26283804
A similar question was posted some time ago.  I can't find it, but I remember that the only solution was to change the font size.  The poster didn't want the size of the text real big, but did want big selection boxes, so I suggested that they create a selection of &nbsp; (or you could set the size of your '---') with a font size (in <span> tags) set to whatever would achieve the height they wanted.

Hope this idea helps.
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26283862
Sorry - just to elaborate in case the idea wasn't conveyed completely...  The following (pseudo)code might give the proper idea:
option.large{ font-size: 20px; }

<select>
    <option class="large">---</option>
    <option>one</option>
    <option>two</option>
</select>

Open in new window

0
 

Author Comment

by:egoselfaxis
ID: 26284137
Nope, I just tried what you suggested, and it doesn't work in IE either.  
0
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26285553
In that case, the only way I can think of to do it is by using jQuery stylish select or by building your own dropdown select using either div or li.

Building your own isn't all that difficult if you know jQuery and are familiar with CSS dropdown menus, but it is more work than styling the select dropdown which seems to be a major headache.

If you need help with that, just reply with the request and I'll see what I can do to get you started with that.

0
 

Author Comment

by:egoselfaxis
ID: 26286499
I wish that was an option for me.  I already tried to use jquery's stylish select in my form, but had to abandon using it due to a bug in jquery's implementation within .NET:

http://groups.google.com/group/jquery-en/browse_thread/thread/1807099aff1fab3d

I was hoping that there was a simpler solution, but it appears not.

- yg
0
 
LVL 6

Accepted Solution

by:
Tony O'Byrne earned 2000 total points
ID: 26286913
You could use a ul wrapped in a div to achieve the effect you need.  The code below is VERY basic, but shows you how you can do your own select dropdown with just a small amount of code using regular jQuery.

Remember to include the path to your jQuery library.
<style>
.coolDropdown ul{ display: none; width: 100px; list-style: none; margin: 0px; padding: 0px; }
.coolDropdown ul li:hover{ background: yellow;
</style>

<html>
<div class="coolDropdown"><span class="select">Dropdown!</span>
	<ul>
		<li myValue="1">One</li>
		<li myValue="2">Two</li>
		<li myValue="3">Three</li>
		<li myValue="4">Four</li>
	</ul>
</div>
<html>
<script>
$("div.coolDropdown").bind( "click", function(){
	if( this.showHide ){
		$("ul", this).show() ;
		this.showHide = false ;
	}
	else{
		$("ul", this).hide() ;
		this.showHide = true ;
	}
});

$("div.coolDropdown li").bind( "click", function(){
	var selectValue = $(this).attr("myValue");
	$("span.select", this.parent).text( selectValue ) ;
});
</script>

Open in new window

0
 

Author Comment

by:egoselfaxis
ID: 26323114
Thanks!

- yg
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question