[英]<input> element inside <mat-select> tag angular material
[英]Angular Material - mat-select : Custom padding overflows parent element
我正在使用Angular Material組件,並且試圖自定義組合框(選擇)。 當我更改組件的填充時,它將使包裝div元素溢出。 我期望它會繼續發展。
添加填充之前的外觀
如我們所見,由於mat-select元素通過添加填充來增加其寬度,因此mat-select div沒有增長
HTML代碼
<div style="border: 1px solid black; min-width: 100px; margin: 0px 5px; float: left">
<mat-form-field class="my-select template-select">
<mat-select [(value)]="templateSelected">
<mat-select-trigger>
<div fxLayoutAlign="start center">
<i fxFlex="none" class="material-icons md-dark">visibility</i>
<span fxFlex>{{templateSelected}}</span>
</div>
</mat-select-trigger>
<mat-option value="Full data">
<div fxLayoutAlign="start center" class="template-option">
<i fxFlex="none" class="material-icons md-dark">done</i>
<span fxFlex>Full data</span>
</div>
</mat-option>
<mat-option value="My quarterly report">
<div fxLayoutAlign="start center" class="templateOption">
<i fxFlex="24px" class="material-icons md-dark"></i>
<span fxFlex>My quarterly report</span>
</div>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div style="border: 1px solid black; min-width: 100px; margin-right: 5px; float: left">
<button class="toolbar-button" mat-stroked-button>FILTER</button>
</div>
我正在更改mat-select元素上的填充,如下所示。 (也許不是更改它的地方)
CSS代碼
.my-select mat-select {
background-color: rgba(58, 40, 8, 0.12);
/*padding: 6px 0px 6px 0px;*/ /* NO Left and right padding*/
padding: 6px 10px 6px 10px; /* 10px left and right padding*/
border-radius: 5px;
}
.my-select .mat-select-value {
font-family: Roboto-Regular;
font-size: 16px;
color: rgba(58, 40, 8, 0.87);
}
.my-select .mat-form-field-underline {
display: none;
}
.my-select mat-select-trigger div>i {
margin-right: 8px;
}
有誰知道為什么這種行為? 我該如何解決?
可用的實時代碼: https : //stackblitz.com/edit/angular-mat-select-overflow
非常感謝您的幫助。
問候
我認為在這里您需要使用box-sizing: border-box;
具有CSS box-sizing
屬性。 box-sizing屬性允許我們在元素的總寬度和高度中包括填充和邊框。
style.css文件
/* Add application styles & imports to this file! */
.my-select mat-select {
background-color: rgba(58, 40, 8, 0.12);
/*padding: 6px 0px 6px 0px;*/ /* NO Left and right padding*/
padding: 6px 10px 6px 10px; /* 10px left and right padding*/
box-sizing: border-box;
border-radius: 5px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.