Horizontal scrollbar displayed because absolute positioned elements

Question

In a webshop, i have some sliders on my categoria page. With these sliders, i can filter products between those price.

My problem is, that on mobile devices, the horizontal scrollbar is displayed, because these sliders have absolute position, and the left or right value for that, is calculated by javascript i think.

What can i do with this? The slider plugin name is: Ion range slider.

If you want to check the site, you can do it here:

<div class="filters_container">
                    <input id="range_03" value="" name="" >
                    <input name="price_from" id="price_from" type="hidden" value="26656">
                    <input name="price_to" id="price_to" type="hidden" value="50533">
                    <input name="slider_from" id="slider_from" type="hidden" value="26656">
                    <input name="slider_to" id="slider_to" type="hidden" value="50533">
                </div>

Yes, i added it to the body. But on mobile, i can still move the horizontaly, — Tibi458, Mar 11 '21 at 09:22
not to the body, to the element that has the horizontal scroll bar — andi2.2, Mar 11 '21 at 09:24
In your Image, the horizontal scrollbar is not applied to the body, but an other element in your page. just set the `overflow-x: hidden` to that element — andi2.2, Mar 11 '21 at 09:33

score 0 · Answer 1 · answered Mar 11 '21 at 15:35

0

i would suggest adding padding in the row container, as the width of the selectors is out of the irs-bar context :

answered Mar 11 '21 at 15:35

z4nzi

71
1
2
7

Horizontal scrollbar displayed because absolute positioned elements

1 Answers1