question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
ankitchoudhary26commented, Feb 17, 2021

@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 😃

1reaction
aaron2693commented, Jul 23, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

<input>: The Input (Form Input) element - HTML
If put on more than one element, the first one with the attribute receives focus. The autofocus attribute cannot be used on inputs...
Read more >
Focusing: focus/blur - The Modern JavaScript Tutorial
The focus event is called on focusing, and blur – when the element loses the focus. Let's use them for validation of an...
Read more >
How to move placeholder to top on focus AND while typing?
1. For some reason my floating label is appearing below the text box. · 1. @BivoKasaju You could do it with css by...
Read more >
HTML DOM Input Text placeholder Property - W3Schools
The placeholder property sets or returns the value of the placeholder attribute of a text field. The placeholder attribute specifies a short hint...
Read more >
ion-input: Custom Input Value Type Styling and CSS Properties
Inputs offer two options for clearing the input based on how you interact with it. The first way is by adding the clearInput...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found