The presence of absolute positioned elements is causing the appearance of a horizontal scrollbar

On my webshop's categoria page, I have implemented sliders to filter products based on price ranges.

The issue arises when viewing the site on mobile devices, as a horizontal scrollbar appears due to the absolute positioning of these sliders and their dynamic calculations through JavaScript.

Any suggestions on how to address this? The slider plugin being used is Ion range slider.

Feel free to visit the site for reference

https://i.sstatic.net/DvMnU.png

<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>
javascripthtmlcssbootstrap-4ion-range-slider

Answer №1

Perhaps incorporating some padding within the row element would be beneficial, given that the width of the selectors appears to exceed the bounds of the irs-bar context :

https://i.sstatic.net/NewImg.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Angular material datepicker fails to organize items in a horizontal row

My web application features an Angular Material datepicker, however, I am facing an issue where not all elements are showing up in a row. The view is as follows: Datepicker To prevent any custom CSS from impacting the view, I have removed all customized ...

cssangularangular-materialdatepicker

Testing an ajax-driven website: what's the best approach?

Seeking to develop automated tests for my completely ajax-based website developed using Spring MVC/Java. I possess a basic understanding of Selenium and have managed to create some tests using this tool. The main issue lies in the fact that testing an aja ...

javajavascriptunit-testingselenium

What causes the input to be rendered as read-only when using the value attribute and as read-write when using the defaultValue attribute?

Within my shopping cart, the quantity of items added dynamically increases by +1 each time the same item is added. Additionally, users can manually adjust the quantity of an item within the cart to their preference. I encountered a dilemma with using the ...

htmlreactjs

Complete loading of iframe content on Internet Explorer versions 8 and 9

Having an issue with the full loading of a page in IE8-9. I need to perform certain actions after the content within a div is fully loaded, but it seems that in IE8-9, the page fails to load completely. This is causing problems as my actions are dependent ...

javascriptjqueryinternet-explorer

Videos embedded using the React HTML video tag are not automatically playing on mobile devices

I have implemented a jsx variable to insert a video into my html. Despite following the advice to include muted defaultMuted, and playsinline (which I have already done), the videos autoplay on safari, chrome, and firefox on my computer but not on mobile ...

javascripthtmlreactjshtml5-video

The functionality of a basic each/while loop in jQuery using CoffeeScript is not producing the desired results

I've been experimenting with different methods to tackle this issue. Essentially, I need to update the content of multiple dropdowns in the same way. I wanted to use an each or a while loop to keep the code DRY, but my experience in coffeeScript is li ...

javascriptjqueryforeachwhile-loopcoffeescript

What is the best way to send a file object to a user for download?

When working within a route: app.get('some-route', async (req, res) => { // ... } I am dealing with a file object called file, which has the following structure: https://i.stack.imgur.com/ByPYR.png My goal is to download this file. Cur ...

javascriptnode.jsexpress

Breaking a line within an ngFor loop

I'm working with an ngFor loop to generate multiple PrimeNG buttons. Currently, the buttons are displayed side by side on the same row, but I want each button to appear vertically on its own line. How can this be achieved? Below is the segment of my c ...

htmlangularngfor

Exploring Angular's Observables for handling HTTP requests

Exploring Angular Observable Documentation As I delved into the Angular observable documentation mentioned above, I came across a section that compares promises with observables. Observables provide many values, while promises provide one. This characte ...

javascriptangularrxjsobservablerxjs-observables

HTML Changing the background color of the body using HTML elements

I need assistance with an exercise that requires changing the color of a letter and background when clicking on text. I have successfully changed the text color but am struggling to change the background color. Can someone provide guidance? <html> ...

htmlnodes

Tips for containing bleach spills in Markdown using the ">" quotation tag:To prevent bleach from escaping, utilize the blockquote

My current method of sanitizing user input involves using bleach and Markdown. However, I am facing an issue where the blockquote > symbol is being escaped as & gt; instead of passing it through for rendering with misaka. The documentation mentions ...

pythonhtmldjangomarkdownsanitization

Is it beneficial for performance to utilize JavaScript local variables intermittently?

Looking at these two sections of script, there is a slight difference in length and variable use. The first example is shorter by one line and uses one less variable $t, but it converts this into a jQuery object an extra time. Considering performance rath ...

javascriptjqueryperformance

Different from Local system, the code refuses to work when deployed on the server

I have implemented a basic form where onSubmit it collects the values and passes them to a JavaScript page (via an AJAX call), then sends the data to add.php and returns the result back to the HTML page. The code functions correctly on my local system, but ...

javascriptphpjqueryhtmlajax

403 Forbidden - CSRF Token Not Recognized

I am encountering an issue with Node Express and CSurf - 403 (Forbidden) Invalid csrf token. After reviewing other solutions and attempting all available options, I am still unable to resolve this. The API functions perfectly when tested in Postman. Howe ...

javascriptnode.jsexpressfrontendcsrf

Accessing the element within an ion-tab using document.getElementById

Within my ion-view, I have ion-tabs containing a canvas element. However, when attempting to retrieve the canvas using document.getElementById('photoCanvas'); I receive 'undefined'. Here is the code snippet: HTML: <ion-view ...

javascriptangularjsdomionic-framework

Numerous Customized Google Maps

On my contact page , I have a Google Map V3 that is styled and mostly functional, except for some sprite image display issues. Now, I need to include the same JSON data in two separate maps on my showrooms page . How can I style multiple maps with differen ...

javascriptgoogle-maps-api-3

Show and hide elements using jQuery's toggle functionality

Here is some HTML code that I have: <div id="text-slide"><ul class="menu"> <li><a href="" id="toggle1">Webdesign</a> </li><div class="toggle1" style="display:none;width:45%; position:absolute;left: 16%; top:0;"> ...

javascriptjqueryhtmlelement

When utilizing Ionic Firebase, the user profile saved in the sidemenu is stored using the Events class. However, the saved profile disappears as soon as

Hello there. I am currently working on displaying my user's information in the sidemenu, and after some research, I found that using the Events class might solve this issue. However, I have noticed that the data saved in subscribe gets destroyed whene ...

javascripttypescriptfirebaseionic-framework

Tips for reusing an SVG element that is embedded on the same page

My HTML5 page includes an embedded SVG icon element. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> </head> <body> ...

htmlsvg

Impact of designs on the elements within components

Here's a CSS query I have: If I have the code below, does the styling apply to the contents of v-container but not v-container itself? <v-app id="inspire"> <v-container justify-center style="max-width: 1200px"> <v-layout row ...

cssvue.jsvuetify.js