CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorerhtml-select
mattt
mattt

Reputation: 1471

IE Input Select Box

I'm looking for the easiest solution to fixing a problem I have in Internet Explorer (6,7 & 8), be it CSS or using jQuery. I have a SELECT Input with a defined width (because of where it sits in the layout). Because of the defined width select is cut off from showing their full values, unlike in Firefox & Safari where they are automatically resized to show the whole length of the value..

Surely this is a common problem? Any ideas?

example code:

<select id="Grouping_662066" class="productSelectInput" name="AddToCart_Grouping" onchange="DrawProduct(36331,662066,this.value,'',true);">
</select>

I'm using a CMS system the class 'productSelectInput' is the only identifier what will be consistand across the website. The ID, name and onchange properties will change.

Upvotes: 3

Views: 2357

Answers (5)

Tim - PlattForm Advertising
Tim - PlattForm Advertising

Reputation: 21

You could use regular Javacsript, utilizing the onmousedown, onblur and onchange functions to manipulate the elements CSS. Here is how the solution would look in jQuery (using the same functions).

    var example = $('#some-id');

    $(example).mousedown(function() {
            $(this).css('width','400px');                            
    });
    $(example).blur(function({
            $(this).css('width','200px');                            
    });
    $(example).change(function() {
            $(this).css('width','200px');                            
    });

Upvotes: 1

wheresrhys
wheresrhys

Reputation: 23570

if ie8 supports the psuedo-class :focus you could specify a larger width for when the select is clicked. Won't work in ie6 though, and probably not ie7

Upvotes: 0

Gerardo
Gerardo

Reputation: 1948

As far as I'm concerned, this is a browser issue (IE).

You can include &nbsp; to wrap the options or resize the select dynamically with Javascript on focus and blur events. Also, you could create a drop-down menu with css and javascript (no 'select', but 'ul') and have full control of the interface. (onBlur, javascript should write a the value on a hidden input).

Upvotes: 0

Angel
Angel

Reputation: 401

Here is information and a solution using jQuery.

Upvotes: 4

jerebear
jerebear

Reputation: 6665

Given those constraints, the only thing I can suggest for the IE's is to possibly reduce the size of the fonts.

I'm not certain there's a way otherwise.

Upvotes: 1

Related Questions