Size of a selectbox

Forum Moderators: open

Message Too Old, No Replies

Size of a selectbox

How to set the size of the contents of a drop-down selectbox

designaweb

11:16 am on Nov 10, 2005 (gmt 0)

I have set the size of a selectbox to a fixed width. However, the content of items below item 1 are likely to be larger then the set width. In Firefox, it scales the drop down menu when activated. Is there any way to set this size manually? Also, is there a way to force Internet Explorer to do the same as Firefox, i.e. scale the drop down menu without changing the width of the selectbox itself?

monkeythumpa

6:54 pm on Nov 10, 2005 (gmt 0)

You can set the width of a select box by adding style="width:200px;" to the <input> box. It looks good, but it soon falls apart . . . when people try to use it. In Firefox, all is well, the dropdown expands to show any data that overflows your width is expanded and usable. IE, on the otherhand crops the text leaving it unreadable.

My only workaround for this is to throw it back to editorial for shorter option names.

designaweb

10:37 pm on Nov 10, 2005 (gmt 0)

monkeythumpa,

thanks for the reply, but what you said I've already done. I've set the <select> to a width of 200, but I want to set the <option> to 300 (or something).

Possible?

designaweb

12:28 pm on Nov 13, 2005 (gmt 0)

Is it perhaps possible to make the selectbox horizontally scrollable?

punkdali

5:03 pm on Nov 15, 2005 (gmt 0)

I was able to replicate this functionality you are looking for with DHTML. I did not find a solution using the <SELECT> object.

create a div object that contains a table
create an input object to contain your selected text
create a hidden input object to contain the value you want to save.

use dhtml and javascript to popup the div object when the user clicks on your input box, then hide the div when a row is selected.

I relied heavily on the anchorposition.js from mattkruse.com, and I'm sure other sites contributed as I am a big fan of googling for javascript.

heres an example of how it worked.

var ie= document.all
var ns6= document.getElementById&&!document.all

var isMenu = false ;

var menuSelObj = null ;
var overpopupmenu = false;

// POP UP MENU
functionItemSelMenu(e)
{

varobj = ns6? e.target.parentNode : event.srcElement.parentElement;
var c = getAnchorPosition('ddlBehaviorDesc');

menuSelObj = obj ;

if (ns6)
{
document.getElementById('menudiv').style.left = e.clientX+document.body.scrollLeft;
document.getElementById('menudiv').style.top = e.clientY+document.body.scrollTop;
} else
{
document.getElementById('menudiv').style.pixelLeft = event.clientX+document.body.scrollLeft;
document.getElementById('menudiv').style.pixelTop = event.clientY+document.body.scrollTop;
}
document.getElementById('menudiv').style.display = "";

document.getElementById('item1').style.backgroundColor='#FFFFFF';
document.getElementById('item2').style.backgroundColor='#FFFFFF';
document.getElementById('item3').style.backgroundColor='#FFFFFF';
document.getElementById('item4').style.backgroundColor='#FFFFFF';
isMenu = true;
return false ;
}

document.onmousedown = mouseSelect;
//document.oncontextmenu = ItemSelMenu;

function handlePress(obj) {

var c = getAnchorPosition('ddlBehaviorDesc');

document.getElementById('menudiv').style.left = c.x;
document.getElementById('menudiv').style.top = c.y+20;

document.getElementById('menudiv').style.display = "";

document.getElementById('item1').style.backgroundColor='#FFFFFF';

isMenu = true;
overpopupmenu = true;
return false ;
}

function handleRelease(obj) {
var obj = ns6? e.target.parentNode : event.srcElement.parentElement;

if( isMenu )
{
if( overpopupmenu == false )
{
isMenu = false ;
overpopupmenu = false;
document.getElementById('menudiv').style.display = "none" ;
return true ;
}
return true ;
}
return false;
}

function SetBehavior(sBehID, sBehDesc) {
//alert("in");
document.getElementById("ddlBehavior").value = sBehID;
document.getElementById("ddlBehaviorDesc").value = sBehDesc;
document.getElementById('menudiv').style.display = "none" ;
}

function positionIt(obj) {
if( document.getElementById ) {
// Get a reference to divTest and measure its width and height.
var div = obj;
var divWidth = div.offsetWidth? div.offsetWidth : div.style.width? parseInt( div.style.width ) : 0;
var divHeight = div.offsetHeight? div.offsetHeight : div.style.height? parseInt( div.style.height ) : 0;

// Calculating setX and setX so the div will be centered in the viewport.
var setX = ( getViewportWidth() - divWidth ) / 2;
var setY = ( getViewportHeight() - divHeight ) / 2;

// If setX or setY have become smaller than 0, make them 0.
if( setX < 0 ) setX = 0;
if( setY < 0 ) setY = 0;

// Position the div in the center of the page and make it visible.
div.style.left = setX + "px";
div.style.top = setY + "px";
div.style.visibility = "visible";
}
};

//-->
</script>

</head>
<body >

<div id="menudiv" class="scroll" style="scroll:auto;position:absolute;display:none;top:0px;left:0px;z-index:10000;" onmouseover="javascript:overpopupmenu=true;" onmouseout="javascript:overpopupmenu=false;">
<table width=482 cellspacing=1 cellpadding=0 bgcolor=lightgray>
<tr><td>
<table width=480 cellspacing=0 cellpadding=0>
<tr id="item1" bgcolor="#FFFFFF" width="80" height="16" onMouseOver="this.style.backgroundColor='#EFEFEF'" onMouseOut="this.style.backgroundColor='#FFFFFF'" onClick = "Javascript: SetBehavior('35','Worker Bee');" >
<TD>Worker Bee</TD>
</tr>
<tr id="item2" bgcolor="#FFFFFF" width="80" height="16" onMouseOver="this.style.backgroundColor='#EFEFEF'" onMouseOut="this.style.backgroundColor='#FFFFFF'" onClick = "Javascript: SetBehavior('36','Worker Bee2');" >
<TD>Worker Bee2</TD>
</tr>
<tr id="item3" bgcolor="#FFFFFF" width="80" height="16" onMouseOver="this.style.backgroundColor='#EFEFEF'" onMouseOut="this.style.backgroundColor='#FFFFFF'" onClick = "Javascript: SetBehavior('37','Worker Bee3');" >
<TD>Worker Bee3</TD>
</tr>
<tr id="item4" bgcolor="#FFFFFF" width="80" height="16" onMouseOver="this.style.backgroundColor='#EFEFEF'" onMouseOut="this.style.backgroundColor='#FFFFFF'" onClick = "Javascript: SetBehavior('38','Worker Bee4');" >
<TD>Worker Bee4</TD>
</tr>
</table>
</td></tr>
</table>
</div>

</body>
</html>

[edited by: tedster at 6:30 am (utc) on Nov. 16, 2005]
[edit reason] disable graphic smile faces [/edit]