jscrollpane does not work properly in Firefox, but it functions correctly in Chrome

I am currently utilizing jScrollpane to display a combination of images and a div in a horizontal format. While I have successfully implemented it on Chrome, it appears that Firefox is not applying the CSS correctly to prevent images from wrapping, resulting in a lack of horizontal scrolling.

You can view the implementation here --

Below is the relevant CSS code:

.scroll-pane{
    width: 100%;
    height: 450px;
    overflow: scroll;
    white-space:nowrap;
}

.scroll-pane ul{
    float:left;
    list-style-type:none;
}

.scroll-pane ul li{
    float:left;
}

.scroll-pane ul li img{
    height:420px;
}

.info{
    display: block;
    clear: left;
    width:300px;
    height:420px;
    background-color:gray;
    overflow:hidden;
    white-space:normal;
}

What are your suggestions for improving the functionality of this feature?

Answer №1

To achieve the desired layout, try using the CSS property display:inline-block instead of floating the li elements left.

.scroll-pane ul li {
  display: inline-block;
  margin-right: -4px;
}

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

Click the button to dynamically add a Bootstrap select element

I need assistance creating a select element with a Bootstrap class using a button click event. The element is successfully inserted into the body, but it does not appear on the page. https://i.sstatic.net/ppHfL.png <html> <head> <link re ...

Start the jQuery animation only when the ajax information differs

I am using setInterval to create a timer that runs every 20 seconds. It utilizes jQuery's ajax function load() to populate the toparticles div with data from another URL on the site. After the data is successfully loaded, it applies a jQuery highlight ...

Eliminate any vacant areas within a container and shift the container, along with its contents, on the webpage

I want to eliminate the empty space within the container while maintaining some spacing around the black box, and ensure responsiveness. Additionally, how can I shift the container with its content downwards and to the right of the webpage, while still ke ...

Close any other panel when one is selected in a loop

I am experiencing difficulty with a series of menus that are causing other panels to hide when one is clicked and active. @{int i = 0;} @foreach (var levelOne in Model.MenuLevelOne) { <div class="panel-group" id="accordio ...

Adding a Video as a Background Button Using HTML and CSS

My attempt to utilize background-image in CSS for the button background was unsuccessful as it only supports images, not videos. Is there a way to set a video as the background of a button? My goal is to create a button with a continuously looped muted v ...

The behavior of -webkit-border-radius differs from that of -moz-border-radius

My website is displaying differently on Safari compared to Firefox. I want the CSS to make it look consistent across both browsers. I understand that I could use two div boxes - one for the outline and one for the image. However, I prefer how Firefox only ...

What are some ways to display unprocessed image data on a website using JavaScript?

I have an API endpoint that provides image files in raw data format. How can I display this image data on a website using the img tag or CSS background-image property, without utilizing canvas? One possible approach is shown below: $.get({ url: '/ ...

Contact form repair completed - Messages successfully delivered

I am facing an issue with the contact form on my HTML landing page. Currently, when you click the 'Submit' button, it redirects to a new PHP page displaying 'Success'. Is there a way to make it so that upon clicking 'Submit' a ...

Ways to center text horizontally in a line with the help of bootstrap styles?

.list-group-item{ width: 165px; height: 32px; line-height: 1px; text-align: center; margin-bottom: 1px; margin-top: 58px; margin-left: 20px; } <ul class="list-group" v-if="showSearchHistory"> <li class="list-g ...

Using jQuery to find duplicated records within two JSON object arrays

Here is the structure of my first Json Array: [ {"Invent":"4","Beze":"256","mail":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f7f4f5d6f7f4f5b8f5f9fb">[email protected]</a>"}, {"Invent":"4","Beze":"2 ...

tips on utilizing the JSON information transmitted from the backend

$.ajax({ url: '{{ URL('reports/groupsUsersGet') }}', dataType: "json", data: { group_id : $('#group').val(), }, success: function(data) { <li>"i need to insert variable here"</li> }, error: function (data) ...

Several components utilizing a popup module

I have created a modal popup example where scrolling is disabled in the background but enabled within the pop-up itself. Check out my demo here: View Demo My challenge lies in implementing a grid of images on the website: Take a look at the type of grid ...

What is the best way to avoid adding duplicate HTML content to Bootstrap modal divs using jQuery?

In my project, I wanted to create a functionality where clicking on an image would trigger a modal box to pop up with additional content added once. However, I encountered two issues that I'm currently facing. Firstly, the header text that I intended ...

What is the best way to apply CSS to a mat-row element only when it is being hovered over?

I have a table with rows where a specific condition triggers a light red background color for each row. On hover, the background changes to light gray for all rows. However, I need the special rows (already colored light red) to have a deeper shade of red ...

Server becoming unresponsive following the cancellation of an AJAX call

In a specific scenario, my Ajax request to the server might take longer than usual (around 30-40 seconds). I am utilizing jQuery.ajax and specifying a timeout of 60 seconds. Consequently, if no response is received within this timeframe, the call gets canc ...

Introducing a novel class designed to leverage the attributes of another class

Is there a way to use the @extend feature in CSS to inherit properties from one class to another? Imagine having two CSS files loading on a page in this order: <link rel="stylesheet" href="/css/one.css" media="screen"> <link rel="stylesheet" href ...

Adding content to a paragraph using Jquery

I have 4 sets of data associated with a click-bind event. My goal is to retrieve the value from a hidden field in each set and display it in a paragraph elsewhere on the page when the corresponding checkbox is clicked. Currently, I'm focused on gettin ...

CSS: Containers displayed side by side when screen width is above a certain threshold, otherwise stacked on top of each other

I am trying to make two containers responsive without using media queries or JavaScript. When the screen size is 500px or less, I want the containers to stack on top of each other and take up 100% of the screen width. But when the screen size exceeds 500 ...

What is the best way to ensure that my multiple choice code in CSS & JS only allows for the selection of one option at a time? Currently, I am able

I'm currently facing a small issue that I believe has a simple solution. My knowledge of Javascript is limited, but I am eager to improve my skills in coding for more visually appealing websites. My problem lies in the code snippet below, where I am ...

What is the best way to instantiate objects, arrays, and object-arrays in an Angular service class?

How can I nest an object within another object and then include it in an array of objects inside an Angular service class? I need to enable two-way binding in my form, so I must pass a variable from the service class to the HTML template. trainer.service. ...