Angular Material避免在输入容器中截断标签

Question

我有一个带有几个输入容器的Angular Material页面。

这些容器中的一些并排排列，空间分布为33％和66％。我想在这些输入字段上方只有一个标签。

<div layout="row">
  <md-input-container flex="33">
     <label>My Label</label>
     <input type="text" ng-readonly="true" ng-model="text1"/>
  </md-input-container>
  <md-input-container flex="66">
     <label></label>
     <input type="text" ng-readonly="true" ng-model="text2"/>
  </md-input-container>
</div>

我将标签放在第一个输入容器上方，而在第二个容器上放置一个空标签。 这正是我的问题所在，因为在较小的屏幕上，标签会被截断。这是完全可以理解的，但在我的情况下，我不希望Angular Material的这种行为。我如何实现这一目标？ Here证明了我的问题。在较小的屏幕上，标签会被剪切掉。

TL;博士 我想要两个只有一个标签的输入容器。标签应该始终可见，也可以在小屏幕上显示，但它会被截断。

感谢您的帮助。

Answer 1

It was too simple!

All I had to do was preventing the overflow: hidden; attribute, which is set by default from angular material.

The default truncation looked like this:

After changing the style sheet to overflow: visible !important; the result is exactly what i wanted:

I made an update on the plunker example given above. Here is the new version.