0

Lets say i have a multilevel bootstrap dropdown, which has around 100 of li and on which when i hover a li it opens up a dropdown next to the hovered one.

The issue I am facing is if i set max-height:300px; overflow-y:scroll; overflow-x:visible; on ul to make sure that the 100's of li are in a scrollable container and the dropdown which opens up on hovering an li is visible, is not working, the new dropdown which opens on hovering is not visible. overflow-x is not working the way i want it to work.

JSFIDDLE

After opening the dropdown wait for a second to let the locations populate

void
  • 36,090
  • 8
  • 62
  • 107
  • You may want to add the [Javascript] and [jQuery] tags to your question. Your code contains lots of JS and I'm not sure the problem is entirely rooted in CSS. Personally, nothing I tried in CSS worked. Good luck. – Michael Benjamin Dec 05 '15 at 21:57

1 Answers1

0

I think you need to add position:fixed; to your child element that only the possible solution and you need to manage left and top for alignment issue 

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 165px;
    margin-top: -6px;
    margin-left: -5px;
    -webkit-border-radius: 5px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
    max-height:300px;
    overflow-y:auto;
    overflow-x:visible;
    position:fixed;
}

check the link for details http://jsfiddle.net/esoj2ged/8/

ganesh satpute
  • 391
  • 2
  • 10
  • In your fiddle when i hover on india, it does not show me any dropdown. :( The dropdown is hidden – void Dec 05 '15 at 20:50
  • OK so you want overflow-x should be scroll and overflow-y should be visible? – ganesh satpute Dec 05 '15 at 20:56
  • Just opposite, overflow-y to be scroll and overflow-x to be visible. – void Dec 05 '15 at 21:00
  • No it is not working, as i said earlier, when i hover on india, the popup dropdown is indside the Parent ul, and overflow-x is appearing to be scroll, try hovering on indi – void Dec 05 '15 at 21:12
  • I think you need to go through this link http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue – ganesh satpute Dec 05 '15 at 21:20
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/97088/discussion-between-ganesh-satpute-and-void). – ganesh satpute Dec 05 '15 at 21:22
  • applying position fixed to child element will solve your problem Please check the link http://jsfiddle.net/esoj2ged/8/ – ganesh satpute Dec 05 '15 at 21:38