Closed dylanshipf closed 3 years ago
1.how to set placeholder length?typing words width
2.onBlur event-- Want add the typing words to a Tag and clear the typing words
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.
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;
}
}
PLEASE MAKE SURE THAT:
I'm submitting a ... (check one with "x")
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.