在帶有加載遮罩和固定寬度的溢出隱藏容器中切斷下拉菜單

帶有垂直滾動條的固定寬度容器（如果更多項目不適合視口） - 這意味着瀏覽器將overflow-x設置爲auto。在帶有加載遮罩和固定寬度的溢出隱藏容器中切斷下拉菜單

現在裏面有卡片與表單元素。每張卡都有一個加載掩碼。表單元素可以有一個下拉列表（日期，多重選擇等） - 但是如果它們不適合邊欄，它們會被切斷。

jsfiddle示例顯示問題：藍色區域是潛在的下拉列表。綠色是加載遮罩。

如果我從卡類中刪除相對位置，藍色菜單按預期工作 - 但加載遮罩已損壞。

我怎樣才能讓他們倆工作？

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>

來源

2017-08-10 Agony

我想你已經附上了錯誤的jsfiddle.Please更新它。 –

請更新你的jsfiddle鏈接，它的錯誤，或者你可以檢查https://jsfiddle.net/sandymizz/rgay6htj/如果我沒有錯。 –

已更新jsfiddle – Agony

您可以爲loadmask更改下方，然後刪除位置卡

position: relative;

請檢查下面的鏈接

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

希望這會幫助你！

來源

2017-08-10 12:32:24 Amol

如果你看着你的小提琴 - 綠色的裝飾遮罩不再覆蓋卡片 - 但在卡片的底部顯示爲一個新的元素。 – Agony

您的藍色元素現在已經修復，不會隨卡片一起滾動。 – Agony

在帶有加載遮罩和固定寬度的溢出隱藏容器中切斷下拉菜單

回答

相關問題