noUiSlider: Tooltip Margin Breaks Mobile Layout
I implemented the slider with a tooltip. It seems like the margin on the tooltip is pushing out the overall width of the page, and causing horizontal scrolling on mobile.
When I look at the example (https://refreshless.com/nouislider/slider-options/#section-tooltips) the same margin is applied to the tooltip.
<div class="noUi-tooltip">166.34</div>
Is there a work-around for this? Removing the margin and setting a width seems to be a possible solution, but I’m not sure if there is a proper solution for this.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 18 (8 by maintainers)
Apologies if you have spent time looking into this, I have discovered what the cause of the issue was.
The site that implements noUiSlider uses Wordpress with Angular2, the Angular2 app was importing noUiSlider (11.0.3) but was getting the CSS from the Wordpress part of the site, meaning the CSS that was loaded in was for version 10.1.0.
Once I updated my CSS file to version 11.0.3, I no longer had this issue.
Sorry if I’ve caused any inconvience!
Sorry for the delayed reply. This may have been a caching issue - but a strange one. I had cleared caches, etc, and was still an issue. Then 2 days later, I was working on another issue, the problem disappeared.