CODEWITHSUNDEEP
htmlcssangularjs-materialmd-chip
filipetrm
filipetrm

Reputation: 539

How to make md-chips overflow horizontally?

When exceeding the length of the input, the md-chips creates a new line. I'd like the chips to continue always in one single line and the input to overflow horizontally just as a normal text input. How to achieve this? This answer is not working for me.

Image of the undesired behavior: enter image description here

Upvotes: 2

Views: 3978

Answers (1)

The.Bear
The.Bear

Reputation: 5855

If you want to overflow chips with pure css, you can do the following: (PLUNKER)

HTML

<md-chips class="chips-overflow" placeholder="Enter an animal..."></md-chips>

CSS

.chips-overflow .md-chips {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
}

.chips-overflow .md-chips md-chip, 
.chips-overflow .md-chips .md-chip-input-container {
  display: inline-block;
  float: none;
}

** This will work perfectly with angularjs-material version >= 1.1.0, and it works but will have problems with placeholder with angularjs-material version >= 0.0.9

Upvotes: 3

Related Questions