Log in

View Full Version : Fixed width length for form elements


y1k2h3
11-14-2006, 09:31 AM
Q1 :Does 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 :D 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
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 :D 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?




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:(


<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
Q1 :Does 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 :D 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.

:o