Angular Material - mat-select：自定义填充溢出父元素

Posted 2023-03-13

【中文标题】Angular Material - mat-select：自定义填充溢出父元素

【英文标题】：Angular Material - mat-select : Custom padding overflows parent element

【发布时间】：2019-07-27 20:02:03

【问题描述】：

我正在使用 Angular Material 组件，并且正在尝试自定义组合框（选择）。当我更改组件的填充时，它会溢出包装器 div 元素。我期待它一起成长。

添加内边距之前的外观

添加内边距后的外观

我们可以看到 mat-select 的 div 并没有随着 mat-select 元素通过添加填充来增加其宽度而增长

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

非常感谢您的帮助。

问候

【问题讨论】：

您的问题的stackblitz.com 可能有用。

谢谢，我以前没用过。 angular-mat-select-overflow.stackblitz.io

stackblitz.com/edit/angular-mat-select-overflow

【参考方案1】：

我认为这里你需要使用 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;

Forked solution on stackblitz

【讨论】：

你就是男人！它工作得很好。太感谢了。祝你有美好的一天