In IE can I change the width of the combo box list without changing the width of the control?

I have a drop down list which isn't quite wide enough to display all the values in the list.

As a compromise, is there a way to at least increase the width of the items listed when you click on the control, even though the control width itself remains the same?
purplesoupProgrammerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ALNMOOCommented:
try to use CSS.
DevastatedCommented:
Hi,

i think this is what you are wanting...

<form>
<select style='width:50px' size="1">
<option value="volvo" >Volvo
<option value="saab">Saab
<option value="fiat" selected>Fiat
<option value="audi">Audi
<option value="audi">Rolls Royce
</select>
</form>
DevastatedCommented:
(a lil explanation) basically the style element fixes the width of the 'control' as you put it, the 'options list' then dynamically grows as normal to cater for the width of the options themselves.

hope this helps.
Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

purplesoupProgrammerAuthor Commented:
This doesn't work as you describe. The drop down list keeps to the 50px width, truncating "Rolls Royce" to "Rolls R".
DevastatedCommented:
Ah sorry my bad - thought i checked it in IE - it works in firefox :p - but i guess you already knew that :p

ive checked and tested a lot of the relevant entries from http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/currentstyle.asp to no avail im afraid.

seems like its another of IEs lil quirks.
purplesoupProgrammerAuthor Commented:
I've upped the points to 500.
mushu999Commented:
It is not possible (at least, no way that I can imagine) to have a combobox object on your web page that is, say, 10 characters wide, but then have a user click on it and the drop-down list of elements are, say, 200 characters wide, while still leaving the original object footprint at 10 characters wide. That is not built-in functionality of the given Microsoft web object.

It is possible to have the object resize itself to be big enough on the web page to display all elements in the list with, say, JavaScript:onLoad()...but that would mess up your web page design layout.

Perhaps a sample of code, or better -- perhaps a sample web page that shows what it does now, and an explanation of what you want it to do instead? Is the combobox list populated dynamically at runtime? Or is it statically coded in HTML?
mushu999Commented:
Hmmm, well, after more research I have found out that it IS possible to do using .Net by overriding OnDropDown event of the combobox (this link is for C# but dotNet is dotNet...)

http://codeproject.com/cs/combobox/multicolumncombo.asp

Here is a link to the example image:

http://codeproject.com/cs/combobox/MultiColumnCombo/comboOpen.jpg

Is this what you are looking for?
mushu999Commented:
Finally, here is an object that is written for VB6 (an .ocx) but I see it also does what you are looking for:

http://vcreations.net/product.asp?pID=1
purplesoupProgrammerAuthor Commented:
I'd love to give you the points for all your hard work, but these examples are all for windows applications and I need this to work for Internet Explorer.
purplesoupProgrammerAuthor Commented:
... without an activex control
SquareHeadCommented:
Here's an idea: roll your own...

This may get you started:

<form action="" name="form1">
<div>
      <div>
            <input type="text" name="t1">
            <button style="font-family:'wingdings 3';"
                  onclick="document.getElementById('menu').style.visibility='visible';">q</button>
      </div>
      <div id="menu" style="position:relative; width:300px; border:1px solid #cccccc; visibility:hidden;">
            <span id="1"
                  onmouseover="this.style.background='#0000FF';this.style.color='#FFFFFF';"
                  onmouseout="this.style.background='#FFFFFF';this.style.color='#000000';"
                  onclick="document.form1.t1.value=this.innerText">Option 1</span><br>
            <span id="2"
                  onmouseover="this.style.background='#0000FF';this.style.color='#FFFFFF';"
                  onmouseout="this.style.background='#FFFFFF';this.style.color='#000000';"
                  onclick="document.form1.t1.value=this.innerText">Option 2</span><br>
            <span id="3"
                  onmouseover="this.style.background='#0000FF';this.style.color='#FFFFFF';"
                  onmouseout="this.style.background='#FFFFFF';this.style.color='#000000';"
                  onclick="document.form1.t1.value=this.innerText">Option 3</span>
      </div>
</div>
</form>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
gomikocharCommented:
Hi purplesoup,
  I'm afraid what you are asking for is not possible only by using stylesheets.

Thank you.
purplesoupProgrammerAuthor Commented:
SquareHead seems to have basically done it with the code above, the only remaining problem is how to get the drop down list to close again once it is opened. I'll be willing to split some of the points if someone can close SquareHead's drop down list.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.