tags:

views:

21

answers:

1

I am having an html listbox with a lengthy content. The width of the content is also too long that horizontal scroll bar is a necessity. Unfortunately horizontal scroll bar is not there in listbox. How can get both horizontal and vertical scroll for the listbox. I have given a div as a parent to this html listbox and gave overflow-x: auto for it and given full width for the listbox inside it.

i.e, .listbox{width:560px;height:560px} .div{ height:500px;width:200px}

But when I gave like this i got the horizontal scroll bar for the div which when scrolled shows the whole content.But the vertical scroll of the listbox will be shown only when we move the scroll of the div to the extreme right end

Can any one please help me to solve this problem?

A: 

You have to delegate both the horizontal and vertical scrollbars to the enclosing div:

.listbox {
    width: 560px;
    height: 560px;
    overflow: visible;
}

.div {
    width: 200px;
    height: 500px;
    overflow: auto;
}
Frédéric Hamidi
Thanx for the answer. i have used an html listbox control. Does this have any horizontal scroll property?
Pooja
Do you mean an ASP.NET `ListBox` control or a plain `<select>` element?
Frédéric Hamidi
<select> tag is used not asp control
Pooja
Okay, I edited my answer accordingly.
Frédéric Hamidi
thanx for the answer. The height of the listbox will vary each time so we cannot give a fixed height for the listbox
Pooja
That's not a problem, just remove the `height` property of the `.listbox` selector then :)
Frédéric Hamidi
when we give a fixed height for the listbox then a vertical scroll will appear. i don't need the vertical scroll for the listbox but for the div. sothat div will show the scroll for the listbox. now the listbox and the div is having the vertical scroll
Pooja
okay i will do that
Pooja
if i remove the height property of the listbox then if the content is small then the listbox height will be according to it, right?
Pooja
Yes, it will use the minimum height necessary to display its content.
Frédéric Hamidi
Is it possible to remove the border of the listbox , then it wont be visible,right?
Pooja
If it uses the minimum height then the border for the listbox will be viewed. How to remove that?Please help
Pooja
That's tricky. `border: none;` works in all browsers except Internet Exporer 6 and 7. See http://stackoverflow.com/questions/380037/ie6-ie7-css-border-on-select-element.
Frédéric Hamidi
how to remove the listbox border? i have apllied border:none but it did not work
Pooja
i tried it. but i want it to be applied in IE 6 and 7
Pooja
I thought of giving clip in jquery. will that be helpful?
Pooja
I don't know jQuery enough to give you a straight answer. I suggest you ask that in another question on stackoverflow so more people can answer :)
Frédéric Hamidi
okay thanx for your replay :)
Pooja