I have implemented a website using twitter bootstrap. At the top of the site I have used a nav bar, and inside that used a dropdown menu. The dropdown menu is made up of < ul > and < li > tags. I am showing a list of members inside that dropdwon menu. When the list of member grows the dropdown menu grows horizontally, for which I have added a overflow: auto to the dropdown-menu class. Now its showing an vertical scroll bar, and working fine in browser.

But the same thing is not working in iPad and other iOs devices. I have googled it and found -webkit-overflow-scrolling: touch should work. But it is not working for me. Lot of other solutions are also present, but unfortunately not working for me.

Is there any better solution available. May be anything we can do using css itself.

I have implemented a website using twitter bootstrap. At the top of the site I have used a nav bar, and inside that used a dropdown menu. The dropdown menu is made up of < ul > and < li > tags. I am showing a list of members inside that dropdwon menu. When the list of member grows the dropdown menu grows horizontally, for which I have added a overflow: auto to the dropdown-menu class. Now its showing an vertical scroll bar, and working fine in browser.

But the same thing is not working in iPad and other iOs devices. I have googled it and found -webkit-overflow-scrolling: touch should work. But it is not working for me. Lot of other solutions are also present, but unfortunately not working for me.

Is there any better solution available. May be anything we can do using css itself.

• javascript
• css
• twitter-bootstrap
• webkit
• scroll

Share Improve this question Follow edited Aug 26, 2013 at 7:29 Jakub 13.9k1717 gold badges8383 silver badges142142 bronze badges asked Aug 26, 2013 at 7:20 sandeepsandeep 3,3451111 gold badges3838 silver badges5757 bronze badges 4

• use both overflow: scroll and -webkit-overflow-scrolling: touch;. link. and also have a look at this link Barrow.io – Mr_Green Commented Aug 26, 2013 at 7:43
• Yeah, everywhere its written that -webkit-overflow-scrolling: touch; should work, but don't know why its not working for me. – sandeep Commented Aug 26, 2013 at 8:06
• use with overflow: scroll not with overflow: auto.. – Mr_Green Commented Aug 26, 2013 at 8:07
• Is it not working because I am trying to use it for a < ul > tag, and it should work for a < div > ? Since I am using twitter bootstrap dropdwon-menu, I am not able add a > div > there. – sandeep Commented Aug 26, 2013 at 8:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Add the css property in to your div tag -webkit-overflow-scrolling: touch