473,495 Members | 2,128 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

Horizontal scroll bars in select box

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
3 61116
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
2257
by: Axel Dahmen | last post by:
I'm just transcoding my HTML pages from Quirks to Standard mode. Doing so I noticed that whenever a frame's content overflows its frame, TWO scroll bars appear in Standard mode, a vertical and a...
1
1933
by: Programmer | last post by:
Hi! I've just started using the XVT portability kit in my C++ application, which has a lot of dialogs with list boxes. I ran into an issue when I started using the list boxes. The horizontal...
1
2864
by: RJN | last post by:
Hi I'm using an iFrame to enclose another document. The iFrame width is sufficient to hold the enclosed document. When the enclosed document has more data and exceeds the height set for iFrame,...
0
1357
by: jojobar | last post by:
We are using the ASP:Menu control (horizontal) for site navigation. The menu is contained by a table with css styles that allows us to give the illusion of a menu bar that runs the entire width of...
69
13329
by: RC | last post by:
I know how to do this in JavaScript by window.open("newFile.html", "newTarget", "scrollbars=no,resizable=0,width=200,height=200"); The browser will open a new window size 200x200, not allow...
1
2393
by: David_from_Chicago | last post by:
I am developing an application in Access 2000 (A2K) which has multiple forms and subforms. Until now, all subforms displayed scroll bars properly (according to the subform's property setting). ...
6
2155
by: robertko2 | last post by:
For some reason I can't get vertical or horizontal scroll bars to function at all. They show up at run time, but look like their disabled. I need to make sure that anyone with a low screen resolution...
1
3383
by: eliteflyerteam | last post by:
i was looking for advice on a javascript function - i have horizontal scroll bars disabled using, <body style="overflow-x:hidden;"> but i want to create a function so that when i resize the browser...
1
1682
by: icancreate | last post by:
Anyone know how I can achieve the following. I want to place an animated banner into my homepage that extends beyond the width of the viewing area in the web browser without the browser displaying a...
0
7120
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
7196
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
7373
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
5456
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
4583
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
3088
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
3078
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
1405
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
0
286
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.