角度材質對話框 - 固定位置元素高度在隨機點被切斷

我需要在角度材質對話框中添加一個元素，該對話框具有自己的高度，並且不受對話框的影響（想象一下自定義下拉菜單）。每當我這樣做時，對話框都會在底部切斷，但非常奇怪 - 不是直接在對話框的底部。它可以超出底部20px，然後被隨機截斷。角度材質對話框 - 固定位置元素高度在隨機點被切斷

典筆在這裏：http://codepen.io/kathk1/pen/woQWRZ

.rectangle { 
    background: red; 
    height: 900px; 
    width: 200px; 
    position: fixed; 
    z-index: 2000; 
}

如果啓動該對話框，紅色矩形是固定元件在這種情況下應該是900px高，但它不能拿到高。

是什麼使得它做到這一點和/或如何得到它停止這樣做呢？我很難過。

爲清楚起見對不起編輯：我想的紅色矩形延伸到其全900px 超越對話框。我不希望對話框滾動。

來源

2016-12-14 kathkroll

嗯所以矩形延伸至其最完全的高度和寬度，而不會影響該對話框的尺寸？這意味着它會覆蓋對話內容的權利？ – Searching

你想在白色方塊內做出紅色矩形嗎？

如果是這樣，請將屬性position:fixed;更改爲position: relative;，白色方塊將獲得垂直滾動。

來源

2016-12-15 00:06:08

對不起，爲了清晰起見，我編輯了原始帖子。我想要矩形是900px高，並延伸過去並通過對話框。想象一下非常長的自定義下拉菜單。 – kathkroll

開始更新1

根據您的修改，md-dialog隱藏內容overflow。您將需要重寫此行爲以顯示整個矩形。用你現有的CSS，添加這個來顯示矩形。

md-dialog.md-default-theme 
{ 
    overflow: visible !important; 
}

結束時更新1

您可以創建一個外部div，設置到選擇的固定高度，讓裏面的溢出和滾動的內容。

CSS

.wrapOne{  
    overflow-y: scroll; 
    height:30px; 
} 
.rectangle { 
    background: red; 
    height: 900px; 
    width:200px; 
}

模板

'<md-dialog aria-label="Sample Dialog">' + 
    '<md-content>'+ 
    '<div class="wrapOne"><div class="rectangle">TESTING------TESTING------TESTING------TESTING------TESTING------</div></div>'+ 
    ' <md-list>'+ 
    '  <md-item ng-repeat="item in ctrl.items">'+ 
    '  <p>{{item}}</p>' + 
    '  </md-item>'+ 
    ' </md-list>'+ 
    ' </md-content>' + 
    ' <div class="md-actions">' + 
    ' <md-button ng-click="ctrl.closeDialog()">' + 
    '  Close Greeting' + 
    ' </md-button>' + 
    ' ' + 
    '</md-dialog>',

來源

2016-12-15 00:39:51 Searching

對不起，爲了清晰起見，我編輯了原始文章。我想要矩形是900px高，並延伸過去並通過對話框。想象一下非常長的自定義下拉菜單。 – kathkroll

@kathkroll更新了答案。 Ta – Searching

有趣。這確實有用！非常感謝。我想我錯過了，因爲它是如何讓它掛起一點。不知道爲什麼。 – kathkroll

角度材質對話框 - 固定位置元素高度在隨機點被切斷

回答

相關問題