?
Solved

Adjusting the height of a select dropdown box in IE

Posted on 2010-01-10
9
Medium Priority
?
1,835 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
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

621 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