HTML and CSS

Select tag, making dropdown larger than tag

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Last »

•

Join Date: Oct 2004

Posts: 16

Reputation: plasmafire is an unknown quantity at this point

Solved Threads: 0

plasmafire plasmafire is offline

Offline

Newbie Poster

Select tag, making dropdown larger than tag

Jun 2nd, 2006

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

eg:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<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>
<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??

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Select tag, making dropdown larger than tag

Jun 2nd, 2006

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.

•

Join Date: Oct 2004

Posts: 16

Reputation: plasmafire is an unknown quantity at this point

Solved Threads: 0

plasmafire plasmafire is offline

Offline

Newbie Poster

Re: Select tag, making dropdown larger than tag

Jun 3rd, 2006

•

Originally Posted by 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.

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

Attached Thumbnails

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Select tag, making dropdown larger than tag

Jun 3rd, 2006

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:

[html]
<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>
[/html]

•

Join Date: Oct 2004

Posts: 16

Reputation: plasmafire is an unknown quantity at this point

Solved Threads: 0

plasmafire plasmafire is offline

Offline

Newbie Poster

Re: Select tag, making dropdown larger than tag

Jun 5th, 2006

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.

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Select tag, making dropdown larger than tag

Jun 5th, 2006

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.

•

Join Date: Nov 2006

Posts: 3

Reputation: oyster163 is an unknown quantity at this point

Solved Threads: 0

oyster163

Offline

Newbie Poster

Re: Select tag, making dropdown larger than tag

Nov 1st, 2006

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

XXpx} 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.

•

Join Date: Oct 2006

Posts: 232

Reputation: Rhyan is an unknown quantity at this point

Solved Threads: 24

Rhyan

Offline

Posting Whiz in Training

Re: Select tag, making dropdown larger than tag

Nov 1st, 2006

•

Originally Posted by 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={widthXXpx} 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

•

Join Date: Nov 2006

Posts: 3

Reputation: oyster163 is an unknown quantity at this point

Solved Threads: 0

oyster163

Offline

Newbie Poster

Re: Select tag, making dropdown larger than tag

Nov 1st, 2006

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...

•

Join Date: Oct 2006

Posts: 232

Reputation: Rhyan is an unknown quantity at this point

Solved Threads: 24

Rhyan

Offline

Posting Whiz in Training

Re: Select tag, making dropdown larger than tag

#10

Nov 1st, 2006

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.