Jump to content

[CSS] Problem with long <option> in <select>


guybrush

Recommended Posts

Greetings everyone! I post here 'cause i think the solution is more "css" than "html"

 

I've a <select> with some <option>

Many <option> have long description.

Example:

 

<selece name=sel>
    <option value=10>long description here long description here long description here long description here </option>
    <option value=13>long description here long description here long description here long description here </option>
</select>

 

I NEED to show each description, but too  long to see in the <option> (too big for page).

Actually I cut the description with PHP at 80 chars.

 

Is there a way to show, e.g., as "ALT" for image ? Or any other tricks?

 

Thanks in advance!

Link to comment
Share on other sites

You could do something like this:

<style type="text/css">
select[name="sel"] {
width: 300px;
}
</style>

<select name="sel">
    <option value="10">long description here long description here long description here long description here </option>
    <option value="13">long description here long description here long description here long description here </option>
</select>

Link to comment
Share on other sites

I think you didn't got the target :)

 

The problem is not the size

 

the problem is that I Have to let visible all the description. But if it's too long i need to cut it but, on option mouseover, let see the entire description (as a "title" or "alt")

 

Hope my english is enaugh understandable to explane :)

Link to comment
Share on other sites

Ah, then you can just put the truncated part within the tag and the full part in the title attribute. E.g.

<option value="13" title="long description here long description here long description here long description here">long description here long descripti...</option>

Link to comment
Share on other sites

I already tried it

 

It run with FF but not with IE6

 

<html><body>
<select name="se">
<option value="">----</option>
<option value="15" title="FULL TEXT">bla bla bla</option>
<option value="25" title="FULL TEXT">bla bla bla</option>
<option value="35" title="FULL TEXT">bla bla bla</option>
<option value="45" title="FULL TEXT">bla bla bla</option>
</select>
</body></html>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.