如何调整AngularJS Material Select Box的高度?
How to adjust the height of AngularJS Material Select Box?
我有以下代码
<md-input-container style="margin-right: 10px;width: 13%;" class="ScenarioDetailsDropdown" >
<h4 class="LabelsPageOne">Geography Type</h4>
<md-select ng-model="GeographyType" ng-change="SelectGeographyType()" >
<md-option ng-repeat="(index,ModelTableRow) in ModelTable | unique:'geographyType'" ng-value="ModelTableRow.geographyType" >{{ModelTableRow.geographyType}}</md-option>
</md-select>
</md-input-container>
如何降低 Select 盒子的高度?
另外,如何减少 md-input-container 中的顶部填充?
我试过使用这个:
<md-input-container style="margin-right: 10px;width: 13%;" class="ScenarioDetailsDropdown" style="padding : 0px 0px !important;margin:0px 0px;" >
但是,它不起作用。
你能帮我做这个吗??
谢谢!
这是你追求的东西吗? CodePen
标记
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" style="padding:100px">
<md-input-container class="ScenarioDetailsDropdown" >
<h4 class="LabelsPageOne">Geography Type</h4>
<md-select ng-model="GeographyType" ng-change="SelectGeographyType()" md-container-class="mySelect">
<md-option ng-repeat="(index,ModelTableRow) in ModelTable" ng-value="ModelTableRow.geographyType" >{{ModelTableRow.geographyType}}</md-option>
</md-select>
</md-input-container>
</div>
CSS
.ScenarioDetailsDropdown {
margin: 0;
background: green
}
.ScenarioDetailsDropdown h4 {
margin: 0;
}
.ScenarioDetailsDropdown md-select {
background: white;
}
.ScenarioDetailsDropdown md-select md-select-value {
height: 20px;
min-height: 20px;
}
.mySelect {
margin-top: 25px;
margin-left: 20px;
}
您必须创建自定义指令以支持基于常规 <select></select>
元素的此类自定义。不幸的是 Angular Materials md-select
元素没有提供任何相关选项。
我有以下代码
<md-input-container style="margin-right: 10px;width: 13%;" class="ScenarioDetailsDropdown" >
<h4 class="LabelsPageOne">Geography Type</h4>
<md-select ng-model="GeographyType" ng-change="SelectGeographyType()" >
<md-option ng-repeat="(index,ModelTableRow) in ModelTable | unique:'geographyType'" ng-value="ModelTableRow.geographyType" >{{ModelTableRow.geographyType}}</md-option>
</md-select>
</md-input-container>
如何降低 Select 盒子的高度? 另外,如何减少 md-input-container 中的顶部填充? 我试过使用这个:
<md-input-container style="margin-right: 10px;width: 13%;" class="ScenarioDetailsDropdown" style="padding : 0px 0px !important;margin:0px 0px;" >
但是,它不起作用。 你能帮我做这个吗?? 谢谢!
这是你追求的东西吗? CodePen
标记
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" style="padding:100px">
<md-input-container class="ScenarioDetailsDropdown" >
<h4 class="LabelsPageOne">Geography Type</h4>
<md-select ng-model="GeographyType" ng-change="SelectGeographyType()" md-container-class="mySelect">
<md-option ng-repeat="(index,ModelTableRow) in ModelTable" ng-value="ModelTableRow.geographyType" >{{ModelTableRow.geographyType}}</md-option>
</md-select>
</md-input-container>
</div>
CSS
.ScenarioDetailsDropdown {
margin: 0;
background: green
}
.ScenarioDetailsDropdown h4 {
margin: 0;
}
.ScenarioDetailsDropdown md-select {
background: white;
}
.ScenarioDetailsDropdown md-select md-select-value {
height: 20px;
min-height: 20px;
}
.mySelect {
margin-top: 25px;
margin-left: 20px;
}
您必须创建自定义指令以支持基于常规 <select></select>
元素的此类自定义。不幸的是 Angular Materials md-select
元素没有提供任何相关选项。