Show complete select box entry

[Jens Riedel]

Hi,

I use a select box with a fix width (via stylesheet).
So some of the entries are cut on the right side if they're too long.
Is there a way to display them complete like a tool tip on a mouseover?

Thanks,
Jens

[Grant Wagner]

Re: Show complete select box entry

Jens Riedel wrote:
[color=blue]
> Hi,
>
> I use a select box with a fix width (via stylesheet).
> So some of the entries are cut on the right side if they're too long.
> Is there a way to display them complete like a tool tip on a mouseover?
>
> Thanks,
> Jens[/color]

<select ... onmouseover="th is.title =
this.options[this.selectedIn dex].text;">

Works in Netscape 7, Mozilla and other Gecko-based browsers and Opera 7.
It'd work in IE too if IE displayed the TITLE on <select> in a tooltip.

I even tried the following in IE:

<span id="testWrapper "><select ... onmouseover="th is.parentNode.t itle =
this.options[this.selectedIn dex].text;">
<!-- options -->
</select></span>

No joy. Probably caused by the fact that a <select> is a windows object
that doesn't play well with other HTML elements <url:
http://support.microsoft.com/default...b;en-us;177378 />

--
| Grant Wagner <gwagner@agrico reunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*

http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*

http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-deve...upgrade_2.html

[Ivo]

Re: Show complete select box entry

> <select ... onmouseover="th is.title =[color=blue]
> this.options[this.selectedIn dex].text;">
> I even tried the following in IE:
> <span id="testWrapper "><select ... onmouseover="th is.parentNode.t itle =
> this.options[this.selectedIn dex].text;">
> <!-- options -->
> </select></span>
>[/color]
A workaround that I appear to be progressing with although I can not
post example code atm, is to subtract the Yposition of the select list
from the mouse Yposition, compare that to the selectedIndex to find
which of the dropped down options is currently highlighted, then
display a absolutely floating div NEXT to the select. You need to know
the font height etc.etc.
HTH
Ivo

[Jens Riedel]

Re: Show complete select box entry

Hi Grant,

Grant Wagner wrote:

[..][color=blue]
> No joy. Probably caused by the fact that a <select> is a windows object
> that doesn't play well with other HTML elements <url:
> http://support.microsoft.com/default...b;en-us;177378 />[/color]

Thanks for your hints, it works fine with Mozilla.

Unfortunately IE is just the browser our customers use in 95% of all
cases, so perhaps I have to try the workaround Ivo describes.

Regards,
Jens

[Jens Riedel]

Re: Show complete select box entry

Ivo wrote:
[color=blue]
> A workaround that I appear to be progressing with although I can not
> post example code atm, is to subtract the Yposition of the select list
> from the mouse Yposition, compare that to the selectedIndex to find
> which of the dropped down options is currently highlighted, then
> display a absolutely floating div NEXT to the select. You need to know
> the font height etc.etc.
> HTH
> Ivo[/color]

Hi Ivo,

thanks for this hint. If our customers can't be made to abstain from the
tooltip, I'll try this...

Regards,
Jens