By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,679 Members | 1,030 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,679 IT Pros & Developers. It's quick & easy.

Horizontal scroll bars in select box

P: n/a
Hi everyone,

I've got a select box with multiple="yes" with fixed width.
Unfortunately the content that goes into the box is too wide (and I
can't make the box any bigger due to layout restrictions). Is there
anyway of placing horizontal scrollbars on the select box so that the
user can scroll the box to read the rest of the lines? I'm using FF 1.5
and IE 6.

Does anyone have any solutions to get around this problem?

Thanks

Taras

Jul 15 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Taras_96 wrote:
I've got a select box with multiple="yes" with fixed width.
Unfortunately the content that goes into the box is too wide (and I
can't make the box any bigger due to layout restrictions). Is there
anyway of placing horizontal scrollbars on the select box so that the
user can scroll the box to read the rest of the lines? I'm using FF 1.5
and IE 6.

Does anyone have any solutions to get around this problem?
This should do the trick:

<div style="overflow-x:scroll; width:120px;
overflow: -moz-scrollbars-horizontal;">
<select multiple name="mySelect" size="3">
<option value="1">one two three four five six</option>
<option value="2">seven eight</option>
<option value="3">nine ten</option>
</select>
</div>

Hope this helps,

--
Bart

Jul 15 '06 #2

P: n/a
jim
Taras,
Try using the size="2" attribute; it sets the length of viewable
options in your select box.
eg:
-----------------------------------------
<style type="text/css">
#selectbox{
width:120px;
background-color:cyan;
border:0px;
color:navy;
text-align:center;
font-size:11pt;
font-family:garamond;
}
</style>
</head>
<body>
<form name="myform">
<select multiple="true" name="selectbox" id="selectbox" size="2" >
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
<option value="six">Six</option>
<option value="seven">Seven</option>
</style>
</form>
</body>

Jul 18 '06 #3

P: n/a
Hi Bart,

Your suggestion worked pefectly. I tried doing something similar except
to the select element (which didn't work). It works both in IE and FF.
The only problem is that in IE you can't change the select boxe's
border, so if you put a border around the containing div, you get two
borders in IE (which looks kind of bad).

Anyway of getting around this in IE? Possibly without using an outer
div?

Thanks

Taras
Bart Van der Donck wrote:
Taras_96 wrote:
I've got a select box with multiple="yes" with fixed width.
Unfortunately the content that goes into the box is too wide (and I
can't make the box any bigger due to layout restrictions). Is there
anyway of placing horizontal scrollbars on the select box so that the
user can scroll the box to read the rest of the lines? I'm using FF 1.5
and IE 6.

Does anyone have any solutions to get around this problem?

This should do the trick:

<div style="overflow-x:scroll; width:120px;
overflow: -moz-scrollbars-horizontal;">
<select multiple name="mySelect" size="3">
<option value="1">one two three four five six</option>
<option value="2">seven eight</option>
<option value="3">nine ten</option>
</select>
</div>

Hope this helps,

--
Bart
Jul 21 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.