Troubleshooting: How can I ensure my custom scrollbar updates when jQuery niceselect expands?

I am currently utilizing the jquery plugins mCustomScrollbar and niceselect. However, I have encountered an issue when expanding the niceselect dropdown by clicking on it - the mCustomScrollbar does not update accordingly. I suspect this is due to the absolute positioning of the dropdown list. How can I resolve this issue?

To see the problem in action, please visit:

https://jsfiddle.net/faridulhassan/u3zw09yr/

var $ = jQuery.noConflict(),
wrapper = $('.wrapper');
$('select').niceSelect();
wrapper.mCustomScrollbar();

Answer №1

After experimenting with your fiddler tool, I encountered the issue.

However, upon transferring this code to an HTML file, it appears to be functioning correctly.

I am sharing it here as an answer because it simplifies the process of sharing code.

Feel free to copy and paste this code into an HTML document for testing purposes. It seems that there might have been a restriction within the fiddler tool. Please update us on your findings.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css">
        <style>
            body {
                overflow: hidden;
            }

            .wrapper {
                height: 100vh;
            }

            .mCSB_dragger_bar {
                background-color: #988f01 !important;
            }
            .nice-select {
                float: none;
                .list {
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro voluptatibus accusantium saepe dolor, numquam, debitis magnam consequatur ullam quaerat laudantium pariatur suscipit, ratione odio libero dicta deleniti! Adipisci, vero.
            </p>

            [Rest of the HTML code has been omitted for brevity]

        </div>

        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

        [JavaScript code for functionality omitted for brevity]

    </body>
</html>

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

Getting map data from Mapbox and displaying it on an HTML page

I have been working with Mapbox GL JS and successfully retrieved data in the console. However, I am facing issues when trying to display this data on an HTML page. Can anyone assist me with this problem? I specifically need the data inside mapdata to be sh ...

Ways to verify if a string contains a specific template literal in javascript

I attempted to verify this by using the str.includes('${') method as a straightforward approach, but it did not produce the expected results. I found that it also returned strings that didn't contain the specified characters. For instance, ...

Is there a way to automatically trigger an Anthem.NET button click event upon page load in ASP.NET?

My goal is to initiate the loading of an ASP.NET page followed by triggering a server-side event that will update some HTML on the client side. The event is associated with an Anthem.NET imagebutton control, so the most obvious approach would be to simply ...

Struggling to locate the correct path for the CSS file in Express and Handlebars

As part of a student exercise, I am attempting to access an API containing information about presidents and style them using CSS. However, I am facing issues with linking the style.css file. I have tried various methods to change the path and public path ...

A guide on how to efficiently retrieve all images stored in a specific directory

I attempted to showcase all the images from a single directory using jQuery, but unfortunately it is not functioning as expected. My folder setup includes an 'images' folder and a 'js' folder. I followed this question on Stack Overflow ...

Creating a dynamic dropdown menu using JQuery that does not automatically submit the form when a value is

Upon selecting a background color from the dropdown menu, I am generating a dynamic dropdown for text colors. The Text Color dropdown is populated correctly based on the selection of Background Color. Although the functionality works as intended, I encoun ...

Connect Promise.all() with an array of identification numbers

I'm fairly new to working with Promises and I have a question regarding linking the results of `Promises.all()` to unique IDs for each promise once they resolve. Currently, I am making requests to a remote server and retrieving data for each request. ...

Navigating through the CSS menu located in the main directory

I am facing an issue with accessing my CSS menu in different directories. In my root directory, I have a CSS menu that I want to use in subdirectories as well. However, when I navigate to a subdirectory, I find it difficult to go back to the main directory ...

What is the best way to display uploaded images on the server side in a browser using the MEAN stack?

I am currently utilizing the MEAN stack to develop an application that allows users to upload images, preview them, and save them in a MongoDB database via a server implemented with Express. Furthermore, I aim to retrieve these images from the server and d ...

Crashing of history.pushState when using browser's back button

I am currently developing a single page application that loads each section via ajax. The homepage is a separate page, and when you click on 'About', it redirects you to the single page app. I have been able to update the URL for each section and ...

Accessing a subcollection with DocumentSnapshot in Firebase using JS9

Just had a quick question. Is anyone familiar with how to achieve something similar using Firebase JavaScript v9? Essentially, I have a `userDoc` that is a DocumentSnapshot and I need to access a sub-collection with the document snapshot. Here's the c ...

What is required to create a basic application that can function offline while featuring an HTML/CSS user interface?

Newbie inquiry: I am interested in creating a small application that can run offline on a desktop computer. The amount of data to be saved is minimal, so I have the option to use a file or some type of database. However, my main question is: What languag ...

Using Node Express.js to access variables from routes declared in separate files

Currently, I am in the process of developing a website with numerous routes. Initially, all the routes were consolidated into one file... In order to enhance clarity, I made the decision to create separate files for each route using the Router module. For ...

Divide the promised variable into separate named variables

Here is a code snippet that I am working with: Promise.all( categories.map(category => Collection.find({ category })) ).then(items => { return items }) Currently, the output is an array with the same length as categories, where each element is ...

The responsive menu refuses to appear

my code is located below Link to my CodePen project I'm specifically focusing on the mobile view of the website. Please resize your screen until you see the layout that I'm referring to. I suspect there might be an issue with my JavaScript cod ...

Semantic UI Troubles: Unraveling the Sidebars and #pusher Defects

Hey there, I could really use some assistance with an issue I'm facing. I have this particular structure that's causing me trouble. <div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed"> ... </div> < ...

Implementing the row delete function in MUI DataGrid using JavaScript

My grid has a delete icon button in each row, but it's not deleting the row. Can someone please help me with this issue? I'm working on a todo app where each row should have its own delete button. I'm struggling to connect the deleteTodo co ...

What methods can I use to prevent jquery.address from modifying the URL in specific scenarios?

I am utilizing a plugin called jquery.address to manage browser history states on my ajax-heavy website. However, there is a specific scenario where I need to prevent the $.address.change() function from being triggered by a certain link. For instance, in ...

Creating CSS rounded corners with pseudo-elements

Take a look at this fiddle: https://jsfiddle.net/xnr7tqm1/ This is the html code I'm working with: <div class="media-container"> <iframe width="365" height="200" src="https://www.youtube.com/embed/JqjIb6FhU_k" frameborder="0" al ...

Can you actually achieve the creation of an Equilateral responsive triangle with a background image using CSS?

It's important that it works in IE11 as well. I've attempted: Using traditional triangle-creating techniques with borders - Unsuccessful, no background image appeared. Clip-path - Failed, no support in IE Triangles created us ...