Text wrapping for inputs

[niczm25]

PLEASE MAKE SURE THAT:

• you searched similar issues online (9/10 issues in this repo are solved by googling, so please...do it)
• you provide an online demo I can see without having to replicate your environment
• you help me by debugging your issue, and if you can't, do go on filling out this form

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] support request/question

Notice: feature requests will be ignored, submit a PR if you'd like

Current behavior If the input-tag would be a long text the text is trim and overflow-x: hidden would not create a new line or wrap the text to break-wrap to display the full text

Expected behavior Is there a solution to this?

Minimal reproduction of the problem with instructions (if applicable)

What do you use to build your app?. Please specify the version

I am implementing this module unto an Ionic 4 project using angular

Angular version:

I am using angular 8 and ionic 4

ngx-chips version:

I am using 2.0.2

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

I have encountered and tried it on all of the following browser Android Web iOS Safari Chrome Firefox

[niczm25]

I have fixed this issue by apply custom theme,, i added height: auto unto tag and white-space: normal unto .tag__text, as shown below is my 'tag-input-theme.scss'

@import "~node_modules/ngx-chips/core/styles/core/_core.scss";

$tag-input-primary: var(--ion-color-primary);
$tag-input-primary-dark: var(--ion-color-primary-shade);

// this is the container's theme
$tag-input-theme: (
    container-border-bottom: 1px solid $tag-input-primary
);

// this is the tag's theme
$tag-input-tag-theme: (
    background: $tag-input-primary,
    background-focused: $tag-input-primary-dark,
    background-active: $tag-input-primary-dark,
    background-hover: $tag-input-primary-dark,
    color: #fff,
    color-hover: #fff,
    border-radius: 5px,
 // no default height value is set, by changing to 'auto' it will adjust base on text content height and as we change .tag__text to white-space: normal
    height: auto !important
);

// this is the delete icon's theme
$tag-input-icon-theme: (
    fill: #fff,
    fill-focus: #eee,
    transition: all 0.35s
);

// apply theme to the container
::ng-deep tag-input .ng2-tag-input.tag-input-theme {
    @include tag-input-theme($tag-input-theme);
}

// apply theme to the tags
::ng-deep tag-input .ng2-tag-input.tag-input-theme tag {
    @include tag-theme($tag-input-tag-theme);
}

// apply theme to the tag' text
::ng-deep tag-input .ng2-tag-input.tag-input-theme tag .tag__text {
    white-space: normal !important;  // default value is 'nowrap'
}

// apply theme to the delete icon
::ng-deep tag-input .ng2-tag-input.tag-input-theme tag delete-icon {
    @include icon-theme($tag-input-icon-theme);
}