Gbuomprisco / ngx-chips

Tag Input component for Angular

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

1. Set placeholder length and typing width? 2.onBlur event-- add the typing words to a Tag and clear the typing words

dylanshipf opened this issue · comments

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

Expected behavior

Minimal reproduction of the problem with instructions (if applicable)

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

**Angular version:6.0.3

**ngx-chips version:1.9.8

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 ]

Thanks in advance.

1.how to set placeholder length?typing words width
image

2.onBlur event-- Want add the typing words to a Tag and clear the typing words
image

For all the guys who have issues with changing style, you can override the ngx-chips style. In my case i needed to change the width of the text-input and placeholder, so instead of creating a custom theme, you can use, in your css or scss file, the ::ng-deep special selector for an specific class. It took me 1 week or so to achieve this and to understand it completely. Im using angular 8, and ngx-chips 2.1.0

This is how i changed width and font for in the css file of my component:

.card-body {
display: inline-flex;
}

.search-img {
cursor: pointer;
position: absolute;
padding: 10px;
}

**THIS IS THE PART PREVIOUS MENTIONED

::ng-deep .ng2-tag-input__text-input {
width: 600px;
font-family: "Arial";
/display: none !important;/
}**

I hope this is help you all, cause i had to figure it out by my own, if you have any questions, please let me know.

@a602123 - Have you got any solution for this issue?
@aaron2693 - You have added a fixed style value. How can we add a dynamic one, so that it takes up the whole free space, instead of a fixed pixel width

Any help on this would be appreciated :)

I have solved this problem in my project. I just used css‘s deep attribute and fixed the width of the input field.

image
image

To make the width of the input box dynamic, I have no idea at the moment.

I struggled with this problem too, and solved with this

::ng-deep tag-input-form > form > input {
    position: relative;
    background-color: transparent;
}

::ng-deep tag-input-form > form {
    input:not([placeholder='']) {
        min-width: 650px;
    }
}