Question

我遇到角度材料md-option大小的问题，其中值字符串很长，它不符合弹性大小，导致宽度会破坏弹性大小。

HTML：

<div layout="row" flex class="md-padding" ng-app="app">
  <div layout="row" flex="100">
    <div flex="35" layout="row" layout-align="start center">Group:</div>
    <div flex="65" layout-align="start center">
      <md-select ng-model="SelectedGroup">
        <md-option value="Group 1">
          Group 1
        </md-option>
        <md-option value="Group 2">
          Group 2 has long text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim distinctio possimus corporis dolores ad obcaecati incidunt quia dolore, nesciunt praesentium provident suscipit amet, dignissimos natus repellat voluptatibus facilis molestiae quos.
        </md-option>
      </md-select>
    </div>
  </div>
  <div flex="5"></div>
  <div layout="row" flex="100">
    <div flex="35" layout="row" layout-align="start center">
      Item:
    </div>
    <div flex="65" layout="row" layout-align="start center">
      <md-select ng-model="SelectedItem">
        <md-option ng-value="Item1">
          Item 1
        </md-option>
      </md-select>
    </div>
  </div>
</div>

Issue on codepen

Answer 1

一个非常简单的错误。每个div的flex的总和应该是100.在你的情况下它是100+5+100。只需将其设为40+10+40即可。这是守则。

<div layout="row" flex class="md-padding" ng-app="app">
 <div layout="row" flex="40">
  <div flex="35" layout="row" layout-align="start center">Group:</div>
  <div flex="65">
   <md-select ng-model="SelectedGroup">
    <md-option value="Group 1">
      Group 1
    </md-option>
    <md-option value="Group 2">
      Group 2 has long text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim distinctio possimus corporis dolores ad obcaecati incidunt quia dolore, nesciunt praesentium provident suscipit amet, dignissimos natus repellat voluptatibus facilis
      molestiae quos.
    </md-option>
  </md-select>
 </div>
</div>
 <div flex="10"></div>
 <div layout="row" flex="40">
  <div flex="35" layout="row" layout-align="start center">
   Item:
  </div>
  <div flex="65" layout="row" layout-align="start center">
   <md-select ng-model="SelectedItem">
    <md-option ng-value="Item1">
      Item 1
    </md-option>
   </md-select>
  </div>
 </div>
</div>

这是工作Codepen。

Answer 2

在我的情况下，为了让md-options适当修剪＆amp; ......很长的选项标签，我不得不：

设置layout="none center"（添加无）

到包裹<md-select>

的外部div

<div layout="row" layout-align="none center">
    <md-select aria-label="Please select an option">
        <md-option ng-repeat="eachOption in myModel.Values" ng-value="eachOption">
            {{eachOption.name}}
        </md-option>
    </md-select>
</div>

角度材料md-option宽度问题，长值

2 个答案: