2

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

The.Bear
  • 5,621
  • 2
  • 27
  • 33
filipetrm
  • 523
  • 6
  • 13

1 Answers1

3

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

The.Bear
  • 5,621
  • 2
  • 27
  • 33
  • Obviously, you don't have overflow like angularjs material tabs, this will be the browser horizontal scrollbar. To do something like that you have to add two arrows icons with fixed position and when the user click it, use [javascript scrollLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft) to move the scroll programatically. Additionally, you will have to hide the horizontal bar with some css trick. As you see is not an easy task... I hope my answer is enough for you – The.Bear Nov 08 '17 at 00:59
  • That actually worked. I just needed to adapt the container so the chips would overflow within it. Thanks for your time. – filipetrm Nov 08 '17 at 19:05
  • 1
    saved my time and energy :) – Muhammad Usman May 19 '18 at 17:49