in Select Option entries are cut on the right side if they're too long

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?

If I have written code as :-

[HTML]<Select name="selName" style="width: 50">

<OPTION value="">Ball Valve </OPTION>
<OPTION value="">Butterfly Valve </OPTION>
</Select>
[/HTML]
in the browser, in select box it displays Ball Valve in full as written but when some text woth longer length , it cuts it off.

as Butterfly Valve gets only displayed as -- Butterfly v

so , on page display itself....(not any , onChane,, event but onMouseOver..) , i want to show all texts with longer length as ToolTip...

thank u.....
Raghavendra Mahendrakar

Jan 5 '07 #1

Subscribe Post Reply

11642

b1randon

171

Expert 100+

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?

If I have written code as :-

[HTML]<Select name="selName" style="width: 50">

<OPTION value="">Ball Valve </OPTION>
<OPTION value="">Butterfly Valve </OPTION>
</Select>
[/HTML]
in the browser, in select box it displays Ball Valve in full as written but when some text woth longer length , it cuts it off.

as Butterfly Valve gets only displayed as -- Butterfly v

so , on page display itself....(not any , onChane,, event but onMouseOver..) , i want to show all texts with longer length as ToolTip...

thank u.....
Raghavendra Mahendrakar

I've seen this before and in my app I could definitely use the ability to make that text wrap, if not complete with a tooltip. I hope someone has an answer b/c I don't know. I'm going to do some research though.

Jan 5 '07 #2

b1randon

171

Expert 100+

I've seen this before and in my app I could definitely use the ability to make that text wrap, if not complete with a tooltip. I hope someone has an answer b/c I don't know. I'm going to do some research though.

Here's what I'm going to use from now on. It is a script that lets the select box expand an contract.

Expand|Select|Wrap|Line Numbers

 
var lilPx = "200px"; //size of small select box

var bigPx = "600px"; //size of large select box

var prefix = 'bs';   //prefix used on all select box IDs
 
document.onmouseover = shrinkAll; //handles abandoned selections (no change)
 
function resize(id){

    //get the element in question

    var elem = document.getElementById(id);
 
    //dynamically init/assign the holder variable

    var holder = eval("hold"+id);
 
    //if select not being held open

    if (!holder){

        //go big->small or small -> big

        if(elem.style.width == bigPx)

            elem.style.width = lilPx;

        else    

            elem.style.width = bigPx;

    }else{

        elem.style.width = bigPx;

    }

}
 
function hold(id){

    //swap the hold value, dynamic of course

    eval("hold" + id + " = !hold" + id);
 
    //change size if necessary

    resize(id);

}
 
function shrink(id){

    //get element to shrink

    var elem = document.getElementById(id);
 
    //set width to small

    elem.style.width = lilPx;
 
    //unhold

    eval("hold" + id + " = false");

}
 
function shrinkAll(e){

    //be sure we have the real src, not a bubble or trickle!

    if (!e) var e = window.event;

    var target = (window.event) ? e.srcElement : e.target;
 
    //shrink em all except that one that was the source (possibly)

    var selects = document.getElementsByTagName('select');

    for(i=0; i<selects.length; i++){

        if(selects[i].id.substring(0,prefix.length) == prefix){
 
            //shrink if it wasn't the source (make sure the src isn't parent for <option> in mozilla)

            if(selects[i].id != target.id && selects[i].id != target.parentNode.id ){

                shrink(selects[i].id);

            }

        }

    }

}

[HTML]
<html>
<head><script type="text/javascript" src="script.js"></script></head>
<body onload="" id="body">
<div id="outtie"></div>
<select style="width:200px;" id="bs1" onmouseover="resize(this.id);" onclick="hold(this.id);" onchange="resize(this.id);" onmouseout="resize(this.id);">
<option>00004546353 - MAKROLON TANK TRUCK</option>
<option>00004567435 - 500 BARRELS OF POLYOL 50 KG ea</option>
<option>00056463543 - POLYURETHANE BLEND</option>
<option>00005464354 - 50% ACID SOLUTION</option>
<option>00056875343 - 50 PALLETS OF RANDOM CHEMICALS</option>
</select>
<br />
<select style="width:200px;" id="bs2" onmouseover="resize(this.id);" onclick="hold(this.id);" onchange="resize(this.id);" onmouseout="resize(this.id);">
<option>00004546353 - MAKROLON TANK TRUCK</option>
<option>00004567435 - 500 BARRELS OF POLYOL 50 KG ea</option>
<option>00056463543 - POLYURETHANE BLEND</option>
<option>00005464354 - 50% ACID SOLUTION</option>
<option>00056875343 - 50 PALLETS OF RANDOM CHEMICALS</option>
</select>
</body>
</html>
[/HTML]
Let me know if you have problems implementing it. ;)

Jan 5 '07 #3

raghav4web

Hi,

Thankyou very much for your code. It's very very worthful for me.

But i am experimenting on this way...

If i want to insert an image, after the dropdown option :

[HTML]<H1>DIV with Hidden</H1>
<DIV style="OVERFLOW: hidden; position:relative; overflow-x: hidden; overflow-y: fixed; fixed; visibility:visible; width:200px"><SELECT title=select >
<option selected>Testing Testing </option>
<option title="This text should appear in a tooltip popup, but does not.">Testing </option>
<option>Testing Testing </option>
<option>Testing Testing Testing </option>
<option>Testing </option>
<option>Testing </option>
<option>Testing </option>
<option>Testing Testing Testing Testing Testing Testing Testing</option>
<option>Testing </option>
</SELECT>
</DIV>
[/HTML]
It's showing the hidden div tag. After the DIV Tag, how to insert an rollover image, which should look and feel works like a dropdown menu... When i click on the menu arrows, the dropdown menu should be visiable as the normal menu.

Is it possible....

Waiting for ur reply...

Jan 8 '07 #4

b1randon

171

Expert 100+

Hi,

Thankyou very much for your code. It's very very worthful for me.

But i am experimenting on this way...

If i want to insert an image, after the dropdown option :

<H1>DIV with Hidden</H1>
<DIV style="OVERFLOW: hidden; position:relative; overflow-x: hidden; overflow-y: fixed; fixed; visibility:visible; width:200px"><SELECT title=select >
<option selected>Testing Testing </option>
<option title="This text should appear in a tooltip popup, but does not.">Testing </option>
<option>Testing Testing </option>
<option>Testing Testing Testing </option>
<option>Testing </option>
<option>Testing </option>
<option>Testing </option>
<option>Testing Testing Testing Testing Testing Testing Testing</option>
<option>Testing </option>
</SELECT>
</DIV>

It's showing the hidden div tag. After the DIV Tag, how to insert an rollover image, which should look and feel works like a dropdown menu... When i click on the menu arrows, the dropdown menu should be visiable as the normal menu.

Is it possible....

Waiting for ur reply...

I'm not really sure what you mean. Do you want replace the select completely or are you trying to build some external controls for it or what?

Jan 8 '07 #5

raghav4web

Hi,

If you see this code

[HTML]<DIV style="OVERFLOW: hidden; position:relative; overflow-x: hidden; overflow-y: fixed; fixed; visibility:visible; width:200px">
<SELECT title=select>
<option selected>Testing Testing </option>
<option>Testing </option>
<option>Testing Testing </option>
<option>Testing Testing Testing </option>
<option>Testing </option>
<option>Testing </option>
<option>Testing </option>
<option>Testing Testing Testing Testing Testing Testing Testing</option>
<option>Testing </option>
</SELECT>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','up1.gif',1) "><img src="down1.gif" name="Image1" width="17" height="20" border="0"></a></DIV>
[/HTML]
When i insert the image inside the DIV layer, when i click on the image, the select options should be visiable the option values. And the click function should work through scripts.

How to define that...

waiting for ur reply...

I'm not really sure what you mean. Do you want replace the select completely or are you trying to build some external controls for it or what?

Jan 9 '07 #6

raghav4web

Hi,

Thank you very very much for your wonderful script. It's working WOW... I just added DIV layer to fix the width.

[HTML]<DIV style="OVERFLOW: hidden; position:relative; overflow-x: hidden; overflow-y: fixed; fixed; visibility:visible; width:200px">
<select class="dropDownLong" name="cusrDtls_DT_FMT" style="width:200px;" id="bs1" onmouseover="resize(this.id);" onclick="hold(this.id);" onchange="resize(this.id);" onmouseout="resize(this.id);">
<option value="02/" selected>Short Date Format Short Date Format Short Date Format</option>
<option value="03/">Long Date Format</option>
<option>Long Date FormatLong Date Format</option>
<option>Long Date FormatLong Date FormatLong Date FormatLong Date Format</option>
<option>Long Date FormatLong Date FormatLong Date Format</option>
<option>Long Date FormatLong Date Format</option>
<option>Long Date FormatLong Date Format</option>
</select></div>
[/HTML]
But now, whenever i select the menu and using to view UP and DOWN arrows from my keyboard, it's alternatively changing the width of the menu. Why this happening. Is there any way to fix this...

Waiting for your reply.

I'm not really sure what you mean. Do you want replace the select completely or are you trying to build some external controls for it or what?

Jan 9 '07 #7

b1randon

171

Expert 100+

Hi,

Thank you very very much for your wonderful script. It's working WOW... I just added DIV layer to fix the width.

<DIV style="OVERFLOW: hidden; position:relative; overflow-x: hidden; overflow-y: fixed; fixed; visibility:visible; width:200px">
<select class="dropDownLong" name="cusrDtls_DT_FMT" style="width:200px;" id="bs1" onmouseover="resize(this.id);" onclick="hold(this.id);" onchange="resize(this.id);" onmouseout="resize(this.id);">
<option value="02/" selected>Short Date Format Short Date Format Short Date Format</option>
<option value="03/">Long Date Format</option>
<option>Long Date FormatLong Date Format</option>
<option>Long Date FormatLong Date FormatLong Date FormatLong Date Format</option>
<option>Long Date FormatLong Date FormatLong Date Format</option>
<option>Long Date FormatLong Date Format</option>
<option>Long Date FormatLong Date Format</option>
</select></div>

But now, whenever i select the menu and using to view UP and DOWN arrows from my keyboard, it's alternatively changing the width of the menu. Why this happening. Is there any way to fix this...

Waiting for your reply.

That is one downside to the behavior I built. It is because I used the onchange event handler and the arrow keys automatically fire onchange. Unfortunately I don't have the time to go digging back through it to improve. You're welcome to have a shot at it yourself. Just post it back here if you figure it out.

Jan 9 '07 #8

njcu

Having a couple problems implementing... I'm using this script with some dynamically created results and the first problem I'm having is that the

Expand|Select|Wrap|Line Numbers

document.onmouseover = shrinkAll;

line is grinding the page to a halt, pretty much crashing the browser, as there alot of fields (bout 500)..
Second problem I'm having (once i've commented the mouseover/shrinkAll line)seems to be with the eval function

Expand|Select|Wrap|Line Numbers

var holder = eval("hold"+id);

Even though "bs123" is a valid id on the page it keeps giving me an error message like; "bs123" is undefined

Code obviously works when I don't mix with my own but I'd like to get it too work properly... any insight?

Dec 24 '07 #9

acoder

16,027

Expert Mod 8TB

Second problem I'm having (once i've commented the mouseover/shrinkAll line)seems to be with the eval function

Expand|Select|Wrap|Line Numbers

var holder = eval("hold"+id);

Even though "bs123" is a valid id on the page it keeps giving me an error message like; "bs123" is undefined

Can you post some of your HTML code? There's no need to use eval for this. You could use something like window["hold" + id].

Dec 26 '07 #10

Similar topics

Opinion: macros and why they're bad

by: Michael Winter | last post by:

In a recent post ("About C error" by Victor, 21 Sep 2003), comments were made about the poster's use of macros. What I would like to know is why they are considered bad? I'm not referring to...

C / C++

Displaying "Please Wait" and animated gif when server-side long process takes place

by: metsymani | last post by:

In my web application, I have a search screen coded in ASP.Net. The Search process takes lot of time. So, I need to show a wait page informing the user that "Search is in progress. Please wait" along...

.NET Framework

Empty strings don't act like they're empty.

by: Clinton Pierce | last post by:

I'm calling a method in another assembly that's supposed to return a string, and possibly that string might be empty. The code looks something like this: string d = r.Field("date").ToString();...

C# / C Sharp

Request Cookies right after they're being Set

by: CDARS | last post by:

Hi all, I have a confusing question on ASP.NET cookies usage: 1> Response.Cookies("test").value = Now 2> Response.Write(Request.Cookies("test").value) 3> 4> Response.write("<hr>") 5>...

ASP.NET

saving settings

by: SuperHik | last post by:

Hi, I was wondering how to make a single .exe file, say some kind od clock, and be able to save some settings (alarm for example) into the same file? Basically make code rewrite it self... ...

Python

using names before they're defined

by: davehowey | last post by:

I have a problem. I'm writing a simulation program with a number of mechanical components represented as objects. When I create instances of objects, I need to reference (link) each object to the...

Python

Extract form field names when they're not known in advance

by: beary | last post by:

I have a page with a form which has automatically generated fields, (which come from mysql column names). There could be any number of these fields, and I have no way of knowing exactly what they're...

PHP

Checking the AUTH_USER against AD (and looking to see which group they're in)

by: Jim in Arizona | last post by:

I've been searching a lot for a simple example to search for a single account name in active directory but have been unable to find what I'm looking for. I did find an exmple (that worked) that...

ASP.NET

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice