Angular Material avoid truncation of labels in input containers

Question

I have an Angular Material page with a few input containers.

Some of these containers are aligned side by side with a space distribution of 33 % and 66 %. I want only one label above these input fields.

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

I placed my label above the first input container and over the second container an empty label. And this is exactly where my problem is located, because on smaller screens the label gets truncated. This is completely comprehensible, but in my case I don't want this behavior of Angular Material. How do I achiev this? Here is a demonstration of my problem. On a smaller screen the label gets cut of.

tl;dr I want two input containers with only one label. The label should be visible all the time, also on small screens, but it gets truncated.

Thanks for any help.

Freddy · Accepted Answer · 2017-05-16 09:41:21Z

2

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.

edited May 16, 2017 at 9:41

answered May 16, 2017 at 9:19

Freddy

1483 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ChumiestBucket Over a year ago

in your Plunker example, it works even without the overflow: hidden;

Collectives™ on Stack Overflow

Angular Material avoid truncation of labels in input containers

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related