Bug after release 4.7.0

[manusoftar]

From that version and over to the latest version you added a left: 0 on the jquery.bootstrap-touchspin.css file which is breaking the visual.

Tha rule is both on line 10 and 19.

It's an easy fix, just remove both lines from the css file.

[istvan-ujjmeszaros]

Can you provide a screenshot of the visual error you are experiencing? Also, is it happening with BS3 or BS4?

[manusoftar]

Basically the buttons are covering the inputbox because on those lines I mentioned you are adding left:0; when they already where setted right:0; I don't think the version of BS would matter as this is a simple CSS thing which is causing problems. I use bower on the project for dependency management and I had bootstrap-touchspin ^4.2.5 as a dependency so bower grabbed bootstrap-touchspin 4.7.3, I had to manually check the last releases until I was able to find the most recent release without that bug and it happened to be 4.6.2, the next release (4.7.0) is where the bug was introduced on the code. This is more or less how it looks when that left:0; is present on the css on the lines I indicated.  This is how it looks when you remove those lines  Thanks. El vie, 23 jun 2023 a las 16:15, István Ujj-Mészáros (< ***@***.***>) escribió:

…

Can you provide a screenshot of the visual error you are experiencing? Also, is it happening with BS3 or BS4? — Reply to this email directly, view it on GitHub <#161 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABPOOA2W23MOUVGKIIVYBM3XMXTMPANCNFSM6AAAAAAZRY3HGE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[istvan-ujjmeszaros]

Thanks for the details and for the effort. FYI the images didn't came through.

It is just a guess but you may be initializing TouchSpin on an inut with existing addons or something like that. left:0 indeed is required as there should be a wrapper around the element with the vertical buttons, with position:relative specified on it, and both left:0 and right:0 are required on the absolutely positioned vertical buttons to fill the relative wrapper.

There are HTML files under /__tests__/html/ in the project sources that I am using to check the rendering, you can take a look on those to see if you are experiencing the same error. If not, then you may double check how you are initializing the plugin. Feel free to add more details and if it is something fixable then I will look into it.

You can just download the source zip and run the html files locally.
https://github.com/istvan-ujjmeszaros/bootstrap-touchspin/archive/refs/heads/master.zip

[manusoftar]

I fixed the images so you can see what that makes, how it looks when you have that left:0; which wasn't until 4.7.0 release.

And if you think it, it doesn't make sense, I mean, if you have position: absolute, and also right:0 (which is reasonable because the up/down buttons go on the right of the input field), if you also put left:0 then it will stretch those buttons to actually cover the total width of the parent element which is also the input's parent, and since the buttons have a higher z-index than the input, then they end up covering the whole input box.

Once again, until release 4.6.2 those left:0 where not present on your css, and it worked just fine, somehow those lines got introduced in your code after release 4.7.0 and remained there until now.

It's true I'm also using angular-touchspin which is basically a wrapper to use you "plugin" throug an angularjs directive but it shouldn't have anything to do with the issue because it doesn't add any css, just applies your plugin through a directive.

[istvan-ujjmeszaros]

Thank you for the additional details. FYI the vertical buttons were breaking out of the content box before v4.7.0, so I needed to re-structure the DOM, that's when a new wrapper was being introduced around the buttons (not around the input - you can check that if interested by downloading the source files and open one of the html files I have mentioned earlier).

My guess is that angular-touchspin is injecting its own HTML which is incompatible with the new version. I have never used Angular but will try to reproduce it. Until then, you can fix it by adding a definition like left: initial; to make it behave like left: 0 was never set.

[istvan-ujjmeszaros]

Yeah, here are the HTML that is being injected by angular-touchspin:
https://github.com/nkovacic/angular-touchspin/blob/master/src/components/touchspin/touchspin.directive.html

That should be updated at their end, would you mind opening an issue there? Or you can just use the left:initial trick if it makes it work as before.

[manusoftar]

If angular-touchspin is still being update I will open an issue there no prob. Thanks for your time and your library. El dom., 25 de junio de 2023 8:42 p. m., István Ujj-Mészáros < ***@***.***> escribió:

…

Yeah, here are the HTML that is being injected by angular-touchspin: https://github.com/nkovacic/angular-touchspin/blob/master/src/components/touchspin/touchspin.directive.html That should be updated at their end, would you mind opening an issue there? Or you can just use the left:initial trick if it makes it work as before. — Reply to this email directly, view it on GitHub <#161 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABPOOA226IMQE37ZWJTRBXTXNDEFVANCNFSM6AAAAAAZRY3HGE> . You are receiving this because you authored the thread.Message ID: ***@***.***>