Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
460 views
in Technique[技术] by (71.8m points)

html - Dropdown Opens Under Modal - CSS Issue

I have a bootstrap modal which has several dropdowns inside it due to lots of stuff I set overflow: auto so that it has scroll bar (see scroll bar at right side of the pic).

Now problem is when I click dropdown it opens under the modal (see image) I need dropdown to open over that modal.

P.S: I googled and found lots of solution where we need to set modal CSS property overflow: visible. But in my case I have to set overflow: auto coz I have lots of stuff inside modal and scroll bar is necessary otherwise modal height goes over the page.

Need some CSS expert to fix this issue.

Modal CSS

.modal {
  max-height: 250px;
  overflow: auto; 
}

Dropdown CSS

ul.dropdown {
  z-index: 999999;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

 ul.dropdown li {
  top: 110%;
  padding: 0;
  max-width: 500px;
  max-height: 197px;
  position: absolute;
} 

enter image description here

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Hi you need to give the absolute position for your dropdown ul like this

ul.dropdown {
  position: absolute;
  top: 110%;
  display: inline-block;
  vertical-align: middle;
}

and for the li childrens :

ul.dropdown li {
  padding: 0;
  max-width: 500px;
  max-height: 197px;
} 

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...