Gbuomprisco / ngx-chips

Tag Input component for Angular
MIT License
899 stars 359 forks source link

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

Closed dylanshipf closed 3 years ago

dylanshipf commented 4 years ago

PLEASE MAKE SURE THAT:

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.

dylanshipf commented 4 years ago

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

aaron2693 commented 4 years ago

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.

ankitchoudhary26 commented 3 years ago

@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 :)

dylanshipf commented 3 years ago

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.

vannguyen48 commented 2 years ago

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;
    }
}