Comments (6)
I'd never thought to try that -- Thanks for the heads up.
The library figures out how to position tags and properly size input boxes based on how much space the tags take up on the screen -- if it's not displayed on the screen, then yeah - strange things will happen. I'll plan to add it to the documentation or addressing it in a future release.
from bootstrap-tags.
happened to me too so, +1 :)
from bootstrap-tags.
Has there been any progress on this? I'm having the same problem. I've stuck a tag div inside a modal window that is hidden until a button is clicked. The size of the input box is 0 width until I type something in. Then it sets to normal, and correctly persists upon modal close and open. @maxwells
@rtconner
I tried implementing something similar but it didn't fix the problem. How do you initialize your tags?
from bootstrap-tags.
.. sheesh asking me about code I wrote 8-10 months ago? haha.
@havok2063 anyways .. i just had an event that initialized the library on show() of the div (instead of on page load)
from bootstrap-tags.
@rtconner Yeah, I'm just started trying to implement this nice tag feature in my code, and of course, I end up using it in a way that's broken. :( Could you provide an example of how you got it to work? I've tried a few different ways, but it doesn't seem to fix the problem.
The issue is that when jquery gets the width of a hidden element via $(selector).width(), it returns 0 instead of the actual div width. The tag code does this at line 333 in bootstrap-tags-js. Once the div is visible, it can correctly get the actual width, which persists even if the div element is hidden again. So the solution seems to be to modify that line so it grabs the actual width of the div element, regardless of it being hidden or not. However I don't know how to do that. :) Plus not sure how often things get updated here. The last update was months ago. Any thoughts?
from bootstrap-tags.
FYI
I encountered a similar problem when using the control inside the bootstrap-table control: every next row/record, the tags control was getting bigger.
For anyone interested I fixed it for me like this:
- passed an extra parameter fixedWidth, like .tags( { fixedWidth: 200, ...})
- as havok2063 pointed out above, at line 333 you can find this:
pWidth = _this.$element.width() - pLeft;
replace it with:
if (this.fixedWidth) {
pWidth = this.fixedWidth - pLeft;
} else {
pWidth = _this.$element.width() - pLeft;
}
from bootstrap-tags.
Related Issues (20)
- GitHub repo description misspelling HOT 1
- ajax autocomplete option HOT 1
- mistaken repo
- Tag removal fails with special character (namely '&') HOT 1
- Readonly tags and position absolute HOT 1
- why not border-box
- Making readonly responsive HOT 1
- promptText option ignored on initialization
- Popover does not auto close
- How to define a click function on the tag? HOT 1
- How to maintain the listing of open suggestions?
- Chainable "tagger object" documentation
- How to show suggestions before typing HOT 3
- npm package
- Readme out of date. tags is not a function
- input-sm: tags too big. HOT 1
- Call for Maintainers HOT 1
- When I create a a tag-list input field is not displayed correctly HOT 2
- "beforeDeletingTag" function(tag), always return last tag name.
- get Suggestion from Database mysql
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap-tags.