Member Avatar for plasmafire

Hi, My select box contains some very large text values.

eg:

<select name=mytext>
<option name=one value=one> one </option>
<option name=two value=two> a very very huge option that cannot be accomodated</option>
<option name=three value=three selected> three </option>
<option name=four value=four> four </option>
</select>

i need to make the selectbox size 100px, whereas, in the drop down, i need to show the full text of all the options

select size = say 100 px
dropdown size= say 500 px

How can i do this??

  • 10 Contributors
  • 21 Replies
  • 285 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by plasmafire
Member Avatar for tgreer

I don't understand at all. The "select" is used to place one of the drop-down values into the "textbox" portion of the element. So, almost by definition, the box has to be large enough to contain all of its possible values.

I think what you really what is an "unordered list", the <ul><li> elements.

Member Avatar for plasmafire

I don't understand at all. The "select" is used to place one of the drop-down values into the "textbox" portion of the element. So, almost by definition, the box has to be large enough to contain all of its possible values.

I think what you really what is an "unordered list", the <ul><li> elements.

no dude. i have a select tag, i just wanna make the dropdown larger, as we do in vb, u can set the dropdown size and the select tag separately.
i want the cusomer names to be displayed completely in the dropdown

Member Avatar for tgreer

well like, dude, u no, it's kewl, watever u wanna du

That is so annoying! When did the English "I" and "you" become "i" and "u"? "Wanna" isn't a word once you're past the age of about 3. I'm so tired of responding to posts full of what amounts to baby talk. And I don't work on a ranch, so please don't call me "dude".

Which browser are you using? Both FireFox and IE will expand the size of the "select" to match the longest "option", by default. So, I'm not sure how you generated that screenshot.

However, you can style the select to make it any size you like. Simply add a CSS style attribute to the select tag:

<select style="width:250px;">
<option>short option</option>
<option>A much longer option which will be truncated in the 'select' because the select is styled to 250pixels</option>
</select>
Member Avatar for plasmafire

Well I thought you were a cowboy. I know that you can set the width = 250px. Thatz what i did to get the screenshot. but i need to make only the dropdown larger, and not truncate it to 250 px.
I may have a language problem, but atleast i dont have a comprehension problem.
I need to show the customer names completely. If you want i'll post the VB code to do that as well.

Member Avatar for tgreer

I'm willing to admit I have a comprehension problem. Since the dropdownlist automatically expands, in both IE and FF, to the length of the longest value, I do not comprehend how you're having a problem.

The VB code wouldn't help, since we're discussing a web application, correct? VB isn't a web development language, so how it builds dropdownlists isn't relevant. You can post your HTML, but that won't help much either: I know how HTML behaves.

You haven't answered some initial questions, such as "what browser are you using", so I doubt I can help you further.

Member Avatar for oyster163

Well, I understand what plasmafire means because I got the same problem :(

Let me explain it more clearly.

First, the answer is YES that in IE and FF, the width of drop down list will expand to the length of the longest value. But sometimes (in my case and plasmafire's), you do not have enough space for that expansion. So you have to narrow it down, and then the problem occurs...

Second, the answer is YES again for using style={width:XXXpx} in my case and plasmafire's. It does narrow the drop down list as we want, but it also truncates the value texts in IE as you can see in the screenshot of plasmafire when you select the dropdown. It will automatically expand to have all texts visible in FF, but again not in IE.

I hope that I am clear enough. So my question is if there is anyway that we can make IE behaves like FF in this case. It means the size of dropdownlist is determined by us (through setting style), but the dropdown size will be the length of the longest value.

Thanks in advance for any helps.

Member Avatar for Rhyan

Well, I understand what plasmafire means because I got the same problem :(

Let me explain it more clearly.

First, the answer is YES that in IE and FF, the width of drop down list will expand to the length of the longest value. But sometimes (in my case and plasmafire's), you do not have enough space for that expansion. So you have to narrow it down, and then the problem occurs...

Second, the answer is YES again for using style={width:XXXpx} in my case and plasmafire's. It does narrow the drop down list as we want, but it also truncates the value texts in IE as you can see in the screenshot of plasmafire when you select the dropdown. It will automatically expand to have all texts visible in FF, but again not in IE.

I hope that I am clear enough. So my question is if there is anyway that we can make IE behaves like FF in this case. It means the size of dropdownlist is determined by us (through setting style), but the dropdown size will be the length of the longest value.

Thanks in advance for any helps.

Hi there, I understand what you mean.

I don't know how it will work in plasmafire, however you can try to set a css rule like this, so I hope it works for you:
1. Lets say you set your select as id="myselect"
css:
#myselect {width: 100px;}
2. then you try to control the option element for this select defining the following css rule:

#myselect option{ width: 500px;}

have not tried it, however hope it works in plasmafire...

Good luck

p.s. I don't know if it will corectly validate in css validators

Member Avatar for oyster163

Hi Rhyan,
Thank you for your reply. I tried your codes. Again, it works perfectly (at least as we expected with the width of select and option tags) in FF, but not in IE... :(
IE... a real trouble...

Member Avatar for Rhyan

Well,

I tried it myself - indeed IE is wrong. Tried in FF and Opera - both read it right, still IE does not. Obvioursly the child element <option> inherits parent's setting. No idea how to make it work, sorry.

By the way, sorry for misunderstanding, obvioursly did not read carefully, however I thought plasmafire is a new browser :(

My bad, I must admit.

Member Avatar for oyster163

:) Anyway, thanks for your help, Rhyan.

So... no way to make it work in IE...??? :(

Any helps please...

Member Avatar for shivani.luthra

Hi,

Did you get any solution? I also need same kind of dropdown list. Your help will really be appreciated.

Shivani

Member Avatar for simonhazelden

Hi,

I am new here and am having the same issue. Does anyone know how we can fix this drop down issue for IE. Its a shame IE7 still has this issue even though FF works perfectly with drop down content larger than the field itself.

Any help/advice would be much apperciated.

Thanks,
Simon

Member Avatar for MidiMagic

It has to be that wide to be able to hold the selected item once you choose it.

Member Avatar for thakkarbhav

Hello,

I am new user and i have similar problem with IE.

I will truely appreciate if anyone can answer it.

I have 3 dropdown list on aspx page. When i click them i can see first 25 items. My dropdown lists are databind in aspx.vb page using Stored procedure.

One of my user is using IE but when he clicks on same dropdownlist, he can view only first 5 items. He has to scroll down to get other items.

I checkd display setting, font size but everything is exactly same as mine.

What could be wrong with IE setting ?

Pls advice.

Thanx,
Bhavesh

Member Avatar for MidiMagic

This could be a Windows or a server setting.

Member Avatar for thakkarbhav

Did you replied to my question in item no 15 ?

Member Avatar for MidiMagic

Yes.

Member Avatar for thakkarbhav

I am sure it should be windows setting. This problem happens to only one user. Can you recommend what should be windows setting ? Thanx for yr reply.

Member Avatar for DAVYPLAN

Hi Dudes

(Only kidding)
I think I've found a solution to this one.
Set the style of the SELECT tag to width=100%.
Or a pixel value. This will stop the select element growing to big.
Then add an OnMouseOver event which sets the style to width='200%'
Also add an onBlur event to set the width back to 100%.
The arrow button disappears to the left as you mouse over but other than that it appears to do the job.

Enjoy.

Dave

Member Avatar for plasmafire

Sounds like it might work.. I have moved on to another project, but will give this a shot :).
Cheers. TA

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.