[英]Angular Material - mat-select : Custom padding overflows parent element
I am using Angular Material components, and I am trying to customise a combo-box (select). 我正在使用Angular Material组件,并且试图自定义组合框(选择)。 When I change the padding of the component, it overflows the wrapper div element.
当我更改组件的填充时,它将使包装div元素溢出。 I was expecting it to grow along.
我期望它会继续发展。
Look and feel before adding padding 添加填充之前的外观
Look and feel after adding padding 添加填充后的外观
As we can see the mat-select div did not grew as the the mat-select element increase its width by adding padding 如我们所见,由于mat-select元素通过添加填充来增加其宽度,因此mat-select div没有增长
html code 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>
I am changing the padding on the mat-select element as you can see below. 我正在更改mat-select元素上的填充,如下所示。 (perhaps is not the place to change it)
(也许不是更改它的地方)
css code 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;
}
Does anyone understand why this behaviour? 有谁知道为什么这种行为? How can I fix it?
我该如何解决?
Live code available: https://stackblitz.com/edit/angular-mat-select-overflow 可用的实时代码: https : //stackblitz.com/edit/angular-mat-select-overflow
Thank you very much for your help. 非常感谢您的帮助。
Regards 问候
I think here you need to use box-sizing: border-box;
我认为在这里您需要使用
box-sizing: border-box;
With the CSS box-sizing
Property. 具有CSS
box-sizing
属性。 The box-sizing property allows us to include the padding and border in an element's total width and height. box-sizing属性允许我们在元素的总宽度和高度中包括填充和边框。
style.css 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.