13 replies [Last post]
fambi
Offline
Enthusiast
Last seen: 14 years 19 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Hi everyone.

I have developed my site so that it resizes itself to fit browsers of all sizes using width percentages.

I have a drop down list of items that contain full sentences which are of average 200 characters.

The code looks like this:

<select name="dummy2" style="width: 100%;" >

Now, on IE the 100% limits itself to the parent table that it is within.
But in NS, it is adamant on expanding the size of the select to accomodate 100% of the sentence and therefore forces the parent table to expand waaaaaaay off the viewable screen to accomodate the full sentence.

How can i get around this? (i.e. how can i get NS to behave in the same way as IE?)

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 51 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Problem with a width/select issue!!!

Hi Fambi,
This may be one of the things you have no control over.
Select lists are browser/OS driven.

The best suggestion I can make is to shorten the sentence.

fambi
Offline
Enthusiast
Last seen: 14 years 19 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Problem with a width/select issue!!!

AAAAAAAAAAAAAAAAARRRRRRGGGGGGGGGGGHHHHHHHHHHHHHH.

Problem is that the sentences are dynamically generated based on user's input.

I guess i will have to find some way to restrict the length of the select in an cosmetically attractive manner.

On a separate issue, as you are a guru, maybe you can tell me.

Is there anywhere where i can submit my stylesheet and someone can advise me (free of charge of course) if it is cross-browser friendly?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 51 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Problem with a width/select issue!!!

Hi fambi,
You may be able to use overflow:hidden and set a width on the option element.option{width:100px; overflow:hidden; } hope that helps

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 9 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Problem with a width/select issue!!!

fambi wrote:
Problem is that the sentences are dynamically generated based on user's input.

If the text is controlled by server-side scripts then you should be able to 'wrap' the lines according to character numbers prior to the page being sent to the browser. For example, see > http://uk2.php.net/manual/en/function.wordwrap.php

Life's a b*tch and then you die!

fambi
Offline
Enthusiast
Last seen: 14 years 19 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Problem with a width/select issue!!!

I've tried both, i think Tony's solution is closer to what i need.

Thanks for your input Roy.

fambi
Offline
Enthusiast
Last seen: 14 years 19 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Problem with a width/select issue!!!

Actually, i think i may have found an even better solution.

Roy, do you know how to show the first X amount of characters in a string?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 51 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Problem with a width/select issue!!!

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 9 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Problem with a width/select issue!!!

Thanks Tony, I was away from my desk.
Fambi - the problem with substr() (assuming you're using php) is that it will cut words short. If I am using substr() with a summary text link, I always end the string with an ellipsis thus:

NEWS LINKS
Queen finds corgi licking its ba...
On issue of war, Tony says: Fuc...

Life's a b*tch and then you die!

fambi
Offline
Enthusiast
Last seen: 14 years 19 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Problem with a width/select issue!!!

Thanks Tony. Thanks Roy.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Problem with a width/select issue!!!

My problem's the opposite of fambi's - I want my options to be longer than the select in IE (like they are in FF).

input, select { width: 150px; }
option { width: auto; }

I thought this would do it, but obviously not. Is there a way to get IE to have wider options than selects, or do I need to make the select wider just to accommodate IE?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Problem with a width/select issue!!!

If you don't specify a width at all, <select> cum[1] <option> will pretty much sort itself out. You might see if it behaves civilly in your case.

cheers,

gary

[1] Geez! That's the Latin for "with"[2]. At least it rendered as an italic *beep*, as is proper when including a foreign language word or phrase.

[2] cum (k[u^]m); k[oo^]m), prep. [L. with prep.]
with; together with; along with; as, I work at home in an office-cum-bedroom. --The Collaborative International Dictionary of English v.0.48

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Problem with a width/select issue!!!

Should've explained myself better: I want my selects to be a fixed width because I've got a bunch of inputs & selects all lined up one on top of each other.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 9 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Problem with a width/select issue!!!

Because browser support for the width property on the select control is inconsistent, I just allow the option elements to grow to suit their content. However, I add a fixed line of hyphens that will end up longer than the longest expected option, so that a stack of select inputs will at least form a tidy column (the exact width will depend upon the user's font settings):

choose...
---------------
black
white
red
green

choose...
---------------
big
small
little
large

Life's a b*tch and then you die!