Fixed width length for form elements

**y1k2h3** · 11-14-2006, 09:31 AM

Q1

oes any one come across any webpage that can maintain all its form elements of the same width length.
Especially, for <select> where it width is always predetermine by the longest length.

Q2: Any1 can provide a better javascript or css for me.
It will make the <select/> adjusts itself during rollover/rollout as mine doesn't works

Hehe

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
SELECT{
COLOR:RED; WIDTH:26%;
}
</style>

<script type="text/JavaScript">

var eleTrigger = null;
var defaultWidth_SELECT = '26%';

function mouseOverEvent(ele){
eleTrigger = ele;
var element = document.getElementById(ele).onmousemove = mouseMoveEvent;
}//end mouseOverEvent()

function mouseMoveEvent(){
var eleType = document.getElementById(eleTrigger).type;
if(eleType.indexOf('select') != -1){
document.getElementById(eleTrigger).style.width = 'AUTO';
document.getElementById(eleTrigger).style.color = 'BLUE';
}//end SELECT type
}//end mouseMoveEvent()

function mouseOutEvent(ele){
var eleType = document.getElementById(ele).type;
if(eleType.indexOf('select') != -1){
var selectedValue = document.getElementById(ele).options[document.getElementById(ele).selectedIndex].value;
if(selectedValue == ''){
document.getElementById(ele).style.width = '26%';
document.getElementById(ele).style.color = 'RED';
}
}//end SELECT type
}//end mouseOutEvent()

</script>

</head>
<body>

<tr>
<td >
<table class="tabbox" border=0 cellpadding=0 cellspacing=1 width="100%">
<tr>
<td>Animal In Zoo<br> <select id='txtAnimalType' size='1' onMouseOver="mouseOverEvent(this.id);" onBlur="mouseOutEvent(this.id);">
<option value='' ><-- Any --></option>
<option value='A' >A - APE</option>
<option value='H' selected>H - HIPPOPOTAMUS</option>
<option value='L' >L - LION</option>
<script>
if(this.txtAnimalType.options[this.txtAnimalType.selectedIndex].value != ''){
this.txtAnimalType.style.width = 'auto';
}
</script>
</select> </td>
<td>Food Type <br>
<select id='txtFoodType' size='1' onMouseOver="mouseOverEvent(this.id);" onBlur="mouseOutEvent(this.id);">
<option value='' selected><-- Any --></option>
<option value='H2O'>H2O - WATER</option>
<option value='FRU'>FRU - FRUITS</option>
<option value='VIT'>VIT - VITAMIN</option>
<option value='MEA'>MEA - MEAT</option>
<option value='VEG'>VEG - VEGTABLE</option>
<option value='MEI'>MEI - UNDER MEDICATION</option>
</select>
<script>
if(this.txtFoodType.options[this.txtFoodType.selectedIndex].value != ''){
this.txtFoodType.style.width = 'auto';
}
</script>
</td>
<td>Time Taken<br> <input type="text" id='txtTimeTaken' value="" maxlength=10>
</td>
</tr>
<tr>
<td>Last Name <br> <input type="text" id='txtLastName' value="" maxlength=30>
</td>
<td>First Name <br> <input type="text" id='txtFirstName' value="" maxlength=30>
</td>
<td>Staff Code <br> <input type="text" id='txtStaffCode' value="0123" maxlength=4>
</td>
</tr>
</table>
</td>
</tr>

</body>
</html>

**Acey99** · 11-14-2006, 05:57 PM

Um, don't use percentages use actual pixels like 150px;

**mwinter** · 11-15-2006, 02:28 AM

Originally Posted by y1k2h3

Q1: Does any one come across any webpage that can maintain all its form elements of the same width length.

CSS can be used to suggest that, but not guarantee it (which is about as close as you'll get). However, controls should be as wide as they need to be, not just so that they look nice.

Especially, for <select> where it width is always predetermine by the longest length.

Surely that's a good thing?

Q2: Any1 can provide a better javascript or css for me.
It will make the <select/> adjusts itself during rollover/rollout as mine doesn't works

Hehe

If it doesn't work, and you haven't given a precise specification for what the code should do, how are we supposed to post any suggestions?

Originally Posted by Acey99

Um, don't use percentages use actual pixels like 150px;

Pixel lengths should rarely ever be used to specify the dimensions of elements containing text. They tend to lead to rigid and potentially broken layouts where the font metrics on the user's machine don't match the expectations of the author (common between platforms, or when the user enforces certain preferences). Use em lengths, instead.

Mike

**y1k2h3** · 11-15-2006, 04:16 AM

Any1 knows why it can works.

I added a changeWidth() function that will affect all <select>.
This function basically will modify <select> width once the mouseover event is invoked.

selectObj.setAttribute("onMouseOver", 'this.style.width="auto";');
Did i use it wrongly?? or should i use setProperty("this.style.width", "auto") instead. Or becoz I using <style> to define the width so I'm not allow???
realli confuse with all these

HTML Code:

<style>
SELECT {
	WIDTH: auto; BORDER-RIGHT: thin inset; BORDER-TOP: thin inset; FONT-WEIGHT: normal; FONT-SIZE: 10px; BORDER-LEFT: thin inset; COLOR: #000066; BORDER-BOTTOM: thin inset; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Helvetica; BACKGROUND-COLOR: white
}
</style>
<script>
function changeWidth(){
var i, selectEle;
	for(i=0; (selectEle = document.getElementsByTagName("select")[i]); i++){
		var selectObj = document.getElementById(selectEle.getAttribute("id"));
		selectObj.setAttribute("onMouseOver", 'this.style.width="auto";');
			if(selectEle.options[selectEle.selectedIndex].value == ''){
				selectEle.style.width = "10em";			}
	}//end for
}//end changeWidth()

<body onLoad="changeWidth();">
<td>Animal In Zoo<br> <select id='txtAnimalType' size='1' onMouseOver="">
<option value='' selected><-- Any --></option>
<option value='A' >A - APE</option>
<option value='H' >H - HIPPOPOTAMUS</option>
<option value='L' >L - LION</option>
</select> 
</td>

**tech_support** · 11-15-2006, 05:43 AM

Originally Posted by y1k2h3

Q1

oes any one come across any webpage that can maintain all its form elements of the same width length.
Especially, for <select> where it width is always predetermine by the longest length.

Q2: Any1 can provide a better javascript or css for me.
It will make the <select/> adjusts itself during rollover/rollout as mine doesn't works

Hehe

[COLOR="SandyBrown"]<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
SELECT{
COLOR:RED; WIDTH:26%;
}
</style>

.....

Wrap your code in [code] tags

**y1k2h3** · 11-15-2006, 06:20 AM

hi every1,

can u kindly help me with my problem.
In short, I want a script that changes the width length of a <select> during roll in/out. At inital load, the <select> width is predefined by a css. After which, inside the <body onload=""> then invoke a function which automatically set all <select>s' onMouseOver event to a specific width length.

tnks in advance and sorry 4 my poor english.

Thread: Fixed width length for form elements

Thread Tools

Search Thread

Fixed width length for form elements

Bookmarks

Bookmarks

Posting Permissions