angular-materialmd-autocompletemd-chip

Angular material md-chips md-autocomplete

How do you prevent the input line from expanding when you add multiple chips. I've tried setting the flex and width but it ends up pushing the input line downwards. I've also tried setting it to absolute but that completely messed up the alignment. Here is a picture of what is happening:

Example of md-chip with autocomplete with input box acting weird.

Solution

  • Try to add max-width, max-height and overflow-x: hidden to md-chips-wrap tag in your CSS file.

    Something like this:

    md-chips-wrap{
    max-width: 250px;
    max-height: 40px;
    overflow-x: hidden;
}

    And let me know if it is ok for you!