Funny behavior when inside of a container that is hidden on page load

[rtconner]

When the main (initial) tag div is inside of a container that is hidden on page load, this library does not work very well. Behaves strangely. I had to write some code to wait to initialize bootstrap-tags until the div they were in was displayed.

[maxwells]

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.

[jholland918]

happened to me too so, +1 :)

[havok2063]

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?

[rtconner]

.. 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)

[havok2063]

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

[sverkoye]

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:

1. passed an extra parameter fixedWidth, like .tags( { fixedWidth: 200, ...})
2. 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;
}