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.
Tooltip Margin Breaks Mobile Layout
See original GitHub issueI 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.
Issue Analytics
- State:
- Created 6 years ago
- Comments:18 (8 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
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.