CODEWITHSUNDEEP
cssangular-material
Freddy
Freddy

Reputation: 148

Angular Material avoid truncation of labels in input containers

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.

Upvotes: 3

Views: 4509

Answers (1)

Freddy
Freddy

Reputation: 148

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:

enter image description here

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

enter image description here

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

Upvotes: 2

Related Questions