Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Fixed Size for Select Boxes

Status
Not open for further replies.
jsulman

jsulman

Programmer
Jun 14, 2001
85
US
I posted this on the Javascript forum and then realized it would should go here:

I was wondering if the was a way to fix the size of the html select objects.
I have two select boxes, from and to. A double click moves a selected item to the other select. However, the to box starts out with nothing and is very small. As I move elements into it, it grows according to the size of the largest element in the object. This makes my the table that the selects are in appear to jump around the screen.

Is there a way to fix their size with perhaps a horizontal scroll bar in each select?

Thank you in advance

Jeff Sulman
 
Sort by date Sort by votes
Select boxes differ from browser to browser, and OS to OS. There is no guaranteed way to get consistently-sized select boxes in all, and certainly no way to get horizontal scrollbars in them.

If you want to scroll horizontally, you'll have to forgo the select element, I'd say... or put the select element inside an element that can scroll and clip it.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hmm, if you don't mind tinkering with it a bit you could use CSS to set the width of the box. You won't get a horizantal scrollbar, but your guaranteed that it won't change and if you make it wide enough then it won't be necessary to scroll as well as giving you the option to make both boxes exactly the same size. If you want to fix the size vertically you could just use the size attribute of the select element to make it show a specific number of options.
Something like:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="javascript">
function addSelOption(elem,targElemId){
	var targElem = document.getElementById(targElemId);
	var isDup = false;
	for(var i=0;i<targElem.options.length;i++){
		isDup=isDup || ((targElem.options[i].text == elem.options[elem.selectedIndex].text) && (targElem.options[i].value == elem.options[selectedIndex].value));
		if(isDup) break;
	}
	if(!isDup)
	targElem.options[targElem.options.length] = new Option(elem.options[elem.selectedIndex].text,elem.options[elem.selectedIndex].value);
}
</script>
</head>
<body>
<select style="width: 200px" size="5" id="listA" onClick="addSelOption(this,'listB');">
	<option value="a">A</option>
	<option value="b">BBBBBBBBBB</option>

	<option value="c">CCCCCCCCCCCCCCCCCCCC</option>
	<option value="d">D</option>
	<option value="e">E</option>
	<option value="f">F</option>
</select>
<select style="width: 200px" id="listB" size="5"></select>
</body>
</html>

Keep in mind I wrote that on the fly as an example. It should work :)

-T

barcode_1.gif
 
Upvote 0 Downvote
Tarwn,
Thank you very much. Your example, even though on the fly, worked perfect.

Much appreciated!

Jeff Sulman
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
215
Alt255
Alt255
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
741
3esolar
3
Camila James
  • Locked
  • Question
Shopify vs. WooCommerce – Which Platform To Use For Your Online Store?
Replies
3
Views
173
lucasbrown
lucasbrown
Krus1972
  • Locked
  • Question
Centering Content Within a Fixed Navigation Menu
Replies
10
Views
243
ChrisHirst
ChrisHirst
LyndonOHRC
  • Locked
  • Question
Can I select all child TD's using Parent TR's id?
Replies
5
Views
461
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top