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?

jqueryhtmlcssjscrollpane

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

Guide to integrating various HTML files into a single HTML file with the help of Vue.js

Although I am familiar with using require_once() in PHP, unfortunately, I am unable to use PHP in my current project. I attempted to use w3-include from W3Schools as an alternative, but encountered issues with loading my scripts. Even utilizing JavaScript ...

javascriptphphtmlvue.jsvue-component

What methods can I use to verify that the form data has been effectively stored in the database?

Here's the code snippet I've been working on: <?php // Establishing connection to the database require("database.php"); try{ // Prepare and bind parameters $stmt = $conn->prepare("INSERT INTO clients (phonenumber, firstname) VALUES (:ph ...

phphtmlmysqlpdo

Pass data from a Firebase JavaScript callback function in the Data Access Layer (DAL) to another function in the controller

I have been developing a basic chat application that enables users to send messages in a group chat and see them instantly updated. To achieve this, I opted for Firebase and spent time familiarizing myself with its web API. However, I encountered difficult ...

javascriptjqueryasynchronousmodel-view-controllerfirebase

Equal dimensions for multiple div elements in both height and width

Looking to create responsive blocks using jQuery. I have two cube blocks with different widths. After writing a few lines of code to make them responsive, the second block now takes the height of the first div and changes on resize. Check out this example ...

jqueryhtmlcss

Can jQuery be used to add a fresh entry into a database table connected to MySQL?

Recently I had a job interview where they posed a question about inserting a new record into a MySQL database using only jQuery. I suggested using jQuery ajax, but they insisted on a solution involving solely jQuery and MySQL - no other technologies perm ...

jquerymysql

The functionality of a button within an AngularJS directive is not functioning as intended

I am trying to use a directive twice on one page. Inside the directive, there is a button that should toggle between showing the two directives when clicked. However, I'm encountering an issue where the values are not changing even though the ng-click ...

javascripthtmlangularjsangular2-directives

Scrollable content with sticky positioning using CSS3 and JavaScript

I successfully implemented a sidebar using the position: sticky property and it is functioning perfectly. To identify colors in the following text, refer to the script below. When scrolling, the black area remains fixed while the green area sticks to its ...

javascriptjqueryhtmlcss

Adjust the width of a DIV based on the content of other DIVs, and float and center them all

Initially, what seemed like a simple task has turned out to be more complicated than I anticipated. Here is my code: <html> <head> <style> div { border-top: 1px solid black; margin: 10px; } div#all { border: 0; } </style> <body ...

htmlwidthcss

Having trouble with your jQuery learning and not seeing any results?

I have been attempting to utilize jQuery for a project, but unfortunately, nothing seems to be happening when I click the button. Despite my various attempts to modify the code, the desired effect still eludes me. I am specifically using Firefox as my bro ...

jqueryfunctionclick

In order to showcase an image ahead of another (stay tuned),

Help! I'm facing a dilemma here. I have an abundance of adorable animal images with unique facial expressions, but there's one problem - the eyes are hidden! I desperately want to showcase those captivating eyes. This is what my code looks like. ...

htmlcss

Tips on utilizing media queries to optimize website layout for mobile devices

I'm currently working on a responsive website and utilizing media queries for that purpose. However, I've encountered an issue where the media queries don't seem to apply when the browser window is set to mobile view. Below is the snippet of ...

cssbootstrap-4media-queries

Use HTML input to enter numbers that are not written in the English language

I am facing an issue with my ASP .Net core web application where I am using Devextreme controls. The main requirement for my application is to support both Persian and Arabic languages, including numbers and dates. I have set up my local windows keyboard ...

htmlasp.netasp.net-coreinputlang

How can you conceal nested elements within a layout that adjusts to various screen sizes or is percentage-based

Contemplate this HTML: <body> <div id="parent"> <div id="child"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus sapien congue, fringilla justo quis, aliquam tellus. Maecenas semper consectetur metus ege ...

htmlcssoverflow

How can we ensure that the previous selection is cleared in jQgrid only if the checkbox is not clicked

I've set up a grid with the option for multiselect: true so that I can delete multiple rows at once. When the onSelectRow event is triggered, data related to the ID is loaded and shown to the user. Everything seems to be working fine in this example ...

javascriptjqueryjqgridfree-jqgrid

What are the best ways to ensure a website is responsive in a vertical

When designing a responsive webpage, I encountered an issue with the body element not properly expanding the content vertically. Despite enlarging the web content horizontally, the body failed to adjust its height accordingly, resulting in unwanted black a ...

htmlcss

Utilize jQuery to seamlessly transfer each recorded audio file from rows to corresponding input fields within the table

I have a table below with 2 rows but it can be doubled with a button (Add another Word media) and only one submit button for all rows: <tbody> <tr class="form-row dynamic-medias" id="medias-0"> <td class=&quo ...

javascriptjquerydjango

Modifying table background color using AJAX and jQuery?

Scenario: My web page is designed to automatically search for a specific cell input by the user. If the cell has been input with a value, the table's background color will turn red; otherwise, it will remain green. Currently, the table has not been p ...

phpjavascriptjqueryhtmlajax

HTML integration of JavaScript not working as expected

My experience with separating files in HTML and JS has been positive - everything works smoothly when I link the JS file to the HTML. However, an issue arises when I decide to include the JS code directly within <script> tags in the HTML itself. The ...

javascripthtml

Frame Tweet Integration

Attempting to create an iframe modal with a Twitter share source. <iframe src="https://twitter.com/share" class="tweetFrame"></iframe> The current setup is not functioning properly, resulting in a blank page. Is there a workaround to ensure t ...

html

Displaying an automatic row using jQuery in real-time

I am struggling with displaying a default table row using jQuery. Specifically, I am using the remove() method to delete a table row, but I am unsure how to show a default row if there are no entries to display. Below is the code snippet in question: fu ...

jqueryhtml