在具有负载掩码和固定宽度的溢出隐藏容器中截取下拉菜单

Question

A fixed width container, with vertical scrollbar (if more items than fit in the viewport) - this means browser sets overflow-x to auto.

Now inside it are cards with form elements. Each card has a loadmask. Form elements can have a dropdown (date, multiselect etc) - but they are cut off if they do not fit in the sidebar.

The jsfiddle example shows the problem: Blue area is the potential dropdown list. Green is the loadmask.

If i remove relative position from the card class, blue menu works as intended - but loadmask is broken.

How can i get both of them to work?

http://jsfiddle.net/wLnhh0uz/

CSS:

 .sidebar { width: 280px; height: 400px; overflow-y: auto; overflow-x: hidden; background-color: grey; } .card { width: 240px; min-height: 50px; background-color: white; flex-grow: 1; display: flex; flex-direction: column; position: relative; margin: 10px; } .formitem { height: 60px; } .absoluteformitem { position: absolute; } .absoluteformitem .absoluteitem { position: absolute; width: 400px; height: 100px; background-color: blue; z-index: 100; } .content { flex-grow: 1; padding: 15px; display: flex; flex-direction: column; } .loadmask { height: 100%; width: 100%; position: absolute; background-color: green; opacity: 0.5; z-index: 101; } 

 <div class="sidebar"> <div class="card"> <div class="content"> <div class="formitem"> formitem1 </div> <div class="formitem absoluteformitem"> <div class="absoluteitem"></div> </div> <div class="formitem"> formitem3 </div> <div class="formitem"> formitem4 </div> </div> <div class="loadmask"></div> </div> <div class="card"> <div class="content"> <div class="formitem"> formitem1 </div> <div class="formitem"> formitem2 </div> <div class="formitem"> formitem3 </div> <div class="formitem"> formitem4 </div> </div> <div class="loadmask"></div> </div> </div> 

Answer 1

You can make below changes for loadmask and then remove position for card

position: relative;

please check below link

http://jsfiddle.net/wLnhh0uz/42/

Hope this will help you!