关键词：
【中文标题】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
【讨论】：
你就是男人！它工作得很好。太感谢了。祝你有美好的一天AngularCLI 和 Angular Material（原理图）错误：无法解析集合“@angular/material”
】AngularCLI和AngularMaterial（原理图）错误：无法解析集合“@angular/material”【英文标题】：AngularCLIandAngularMaterial(schematics)error:Collection"@angular/material"cannotberesolved【发布时间】：2018-12-0221:02:48【问题描述】：我正在尝试使用t... 查看详情
无法导入“@angular/material”模块
】无法导入“@angular/material”模块【英文标题】：Notabletoimport"@angular/material"module【发布时间】：2020-05-2506:34:40【问题描述】：我对堆栈完全陌生，我在使用Angular的材料模块时遇到了一些问题。我正在尝试在我的代码中导... 查看详情
Angular2 Material：Angular 材质输入的自定义验证
】Angular2Material：Angular材质输入的自定义验证【英文标题】：Angular2Material:CustomValidationforAngularMaterialInput【发布时间】：2018-03-2315:21:31【问题描述】：在我的Angular2和材料应用程序中，我想检查用户名是否已经被占用。如果它已经... 查看详情
Angular 2 Material - 如何居中进度微调器
】Angular2Material-如何居中进度微调器【英文标题】：Angular2Material-HowToCenterProgressSpinner【发布时间】：2017-05-1406:34:32【问题描述】：我已经从下面的链接实现了Angular2进度微调器https://github.com/angular/material2/tree/master/src/lib/progress-spin... 查看详情
Angular Material - 不关闭 Material 小吃吧
】AngularMaterial-不关闭Material小吃吧【英文标题】：AngularMaterial-NotclosingMaterialsnackbar【发布时间】：2018-09-1223:27:40【问题描述】：我正在使用Angular和AngularMaterial版本5。有没有办法让小吃店保持打开状态？例如，如果发生错误，请... 查看详情
带有 Angular Material 声明的 Angular 编译警告
】带有AngularMaterial声明的Angular编译警告【英文标题】：AngularCompilationWarningswithAngularMaterialDeclarations【发布时间】：2019-10-1809:45:44【问题描述】：我在安装AngularMaterial后尝试编译时遇到了一堆警告（无论是直接来自npm还是通过ngadd... 查看详情
如何有效地使用 Angular Material 自定义调色板颜色 Angular Material
】如何有效地使用AngularMaterial自定义调色板颜色AngularMaterial【英文标题】：HowtouseAngularMaterialcustom-palettecolorseffectivelyAngularMaterial【发布时间】：2019-04-0423:20:01【问题描述】：我正在使用自定义材质调色板。使用其默认阴影、深色... 查看详情
@angular/material/index.d.ts' 不是模块
】@angular/material/index.d.ts\\\'不是模块【英文标题】：@angular/material/index.d.ts\'isnotamodule@angular/material/index.d.ts\'不是模块【发布时间】：2020-02-2322:03:14【问题描述】：使用Angular8，在构建应用程序时，我们遇到以下错误：app/modules/admin... 查看详情
Angular Material Schematics 生成的代码
】AngularMaterialSchematics生成的代码【英文标题】：AngularMaterialSchematicsgeneratedcode【发布时间】：2018-10-2309:54:27【问题描述】：我是Angular的新手，找不到任何东西来解释从nggenerate@angular/material:material-nav生成的这些代码行的确切含义... 查看详情
@angular/material 自动完成的性能问题
】@angular/material自动完成的性能问题【英文标题】：Performanceissuewith@angular/materialautocomplete【发布时间】：2019-10-1416:10:05【问题描述】：我正在使用Angular/Material自动完成功能。在将数据加载到自动完成时遇到严重的性能问题，例... 查看详情
找不到模块'@angular/material-moment-adapter'
】找不到模块\\\'@angular/material-moment-adapter\\\'【英文标题】：Cannotfindmodule\'@angular/material-moment-adapter\'找不到模块\'@angular/material-moment-adapter\'【发布时间】：2018-05-2817:13:55【问题描述】：为什么这不起作用？我尝试导入MomentDateAdapte... 查看详情
波纹效果未显示在角度应用程序的按钮中 - Angular-Material
】波纹效果未显示在角度应用程序的按钮中-Angular-Material【英文标题】：Rippleeffectisnotdisplayinginbuttoninangularapp-Angular-Material【发布时间】：2019-05-1117:32:35【问题描述】：https://material.angular.io/components/button/overview我正在使用这个angula... 查看详情
Angular 2 Material无法加载样式
】Angular2Material无法加载样式【英文标题】：Angular2Materialcan\'tloadstyle【发布时间】：2017-10-0411:06:26【问题描述】：我开始在Angular中使用AngularMaterial库为界面开发一个Web应用程序。但是在尝试导入预建主题时出现错误。为了导入它... 查看详情
Angular Material/Jasmine 测试 - 加载 Material Harnesses 时出错
】AngularMaterial/Jasmine测试-加载MaterialHarnesses时出错【英文标题】：AngularMaterial/Jasminetesting-errorswhileloadingMaterialHarnesses【发布时间】：2020-11-2321:37:52【问题描述】：我正在尝试测试使用AngularMaterial构建的组件，但是在使用HarnessLoader... 查看详情
angular-material2 工具栏阴影
】angular-material2工具栏阴影【英文标题】：angular-material2toolbarshadow【发布时间】：2017-07-1322:07:27【问题描述】：我是material2的新手我试图将主应用程序工具栏固定在屏幕顶部，问题是海拔无法正常工作（内容隐藏了工具栏的阴影... 查看详情