View Full Version : line up text in list/menu (drop down menu)
no1uknow
01-12-2006, 04:23 PM
I have a feeling I know this answer to this, but thought I'd ask....
I have an html list/menu (option, drop down menu)
In there I have:
first name last name, address city
Is there anyway to make columns so that everything lines up instead of an S pattern when you pull it down...
thx
jscheuer1
01-13-2006, 11:15 AM
I hope you mean that you want them centered. Anyways, to do that, put the style and script section from this demo in the head of your page. You will also need to set the width of the select element via its inline style, as shown, using ex as units. You can use whatever number works out for you: 30ex, 100ex, whatever:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Centered Drop Downs - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
select, option {
text-align:center;
}
</style>
<script type="text/javascript">
function centO(){
if (!document.documentElement.filters)
return;
var o=document.getElementsByTagName('option')
for (var i_tem = 0; i_tem < o.length; i_tem++)
if (o[i_tem].text.length<parseInt(o[i_tem].parentNode.style.width, 10)){
var l=parseInt(o[i_tem].parentNode.style.width, 10)-o[i_tem].text.length
for (var j_tem = 0; j_tem < l; j_tem++)
o[i_tem].innerHTML=' '+o[i_tem].innerHTML
}
}
onload=centO;
</script>
</head>
<body>
<select style="width:20ex;" name="">
<option value="">hazgngtn
<option value="">bfb
<option value="">fbbnb
<option value="">bzb
<option value="">fjkmkmhfhjm
<option value="">nbfz
</select>
</body>
</html>
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.