Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Best method for long <option>'s ?

    I have a number of pre-set options the user can choose from, but each of the options is quite long (each option is a sentence.)

    What is the best way to implement this? Using a drop down works if I make it really wide, but it doesn't look good on the page. Using a narrower option the user can't see all the text of the option they select.

    I have searched the archives but couldn't really see anything addressing this closely. Is it possible to break an option into 2 lines?

    please help. t h a n k s.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How many options are there? It might be better to organise them as radio buttons. afaik you can't wrap text in a select option
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #3
    New Coder
    Join Date
    Jan 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by brothercake
    How many options are there? It might be better to organise them as radio buttons. afaik you can't wrap text in a select option
    There are about 25 options, but as I say they are each about a (longish) sentence long. Radio buttons would take up too much room.

    Is there a way to add tool-tips to <option>'s? That way I could use a medium size select box with size="5" and when the user mouses over one of the visible options a tool-tip would appear with the rest of the text displayed. That would be the ideal solution. I just don't know if it's possible.

    Anyone know (and if so, know how?)

  • #4
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb A solution?

    Hey Greenhive,
    I use this sort of drop down menu for navigation a lot and I run into the same problem. Here are two possible solutions, you can use a smaller font size to help a little bit or you can put the remainder of the text on a seperate line and indent it. If the visitor clicks on either link it will take them to the same place. They do that on the cbs.com website for the "LAte Late Show with Craig Ferguson". Is there anyway that you can shorten the text? I think these are the only solutions.

    -Dave
    PROWEBWORKS.NET

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by greenhive
    There are about 25 options, but as I say they are each about a (longish) sentence long. Radio buttons would take up too much room.

    Is there a way to add tool-tips to <option>'s? That way I could use a medium size select box with size="5" and when the user mouses over one of the visible options a tool-tip would appear with the rest of the text displayed. That would be the ideal solution. I just don't know if it's possible.

    Anyone know (and if so, know how?)
    title attribute (which shows as a tooltip), in option tags are supported in Gecko browsers but not in IE. So I'd go for radio buttons, you can shorten the sentence and put tooltip.

    <input type="radio" name="item" id="item1" value="blah" title="blah blah blah" /><label for="item1" title="blah blah blah">blah</label>
    Last edited by glenngv; 01-19-2005 at 03:54 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •