长值的角度材料 md-option 宽度问题答案

【问题标题】：angular material md-option width issue with long value长值的角度材料 md-option 宽度问题
【发布时间】：2017-07-05 14:05:57
【问题描述】：

我遇到了角度材料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

【问题讨论】：

那么您希望 2 行用于更长的名称还是什么？
问题不在于空格或分词，文本应包含在所选的 flex size exp: flex="65" 但它将下一个元素向右推以占用更多宽度. （默认为省略号）

标签： angularjs flexbox angular-material

【解决方案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。

【讨论】：

谢谢，我在朋友的帮助下应用了同样的解决方案。

【解决方案2】：

就我而言，为了让 md-options 正确修剪 & ... 非常长的选项标签，我必须：

设置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>

【讨论】：