It doesn't work on a list dropdown.

[gusbemacbe]

Hello, I use Bootstrap 4 and I built a language selector on the navbar. It is a list dropdown. With this plugin, I added the #beleza as id. I tried to put on every tag and nothing works.

Language Selector HTML:

<div id="beleza" class="btn-group dropdown pull-right">
        <li class="dropdown language-selector list-inline">

            <a href="index.php" class="dropdown-toggle estilo" data-toggle="dropdown" data-close-others="true">
                Idioma
            </a>

            <ul class="dropdown-menu pull-right scrollable-menu" role="menu">
                <li>
                    <a href="?lang=catalan" name="catalan" class="estilo">
                        <img src="imagens/cat.svg">
                    </a>
                </li>
                <li>
                    <a href="?lang=german" name="german" class="estilo">
                        <img src="imagens/de.svg">
                    </a>
                </li>
                <li>
                    <a href="?lang=english" name="english" class="estilo">
                        <img src="imagens/en.svg">
                    </a>
                </li>
                <li>
                    <a href="?lang=spanish" name="spanish" class="estilo">
                        <img src="imagens/es.svg">
                    </a>
                </li>
                <li>
                    <a href="?lang=french" name="french" class="estilo">
                        <img src="imagens/fr.svg">
                    </a>
                </li>
                <li>
                    <a href="?lang=italian" name="italian" class="estilo">
                        <img src="imagens/it.svg">
                    </a>
                </li>
                <li>
                    <a href="?lang=dutch" name="dutch" class="estilo">
                        <img src="imagens/nl.svg">
                    </a>
                </li>
                <li>
                    <a href="index.php" class="estilo">
                        <img src="imagens/pt-br.svg">
                    </a>
                </li>
                <li>
                    <a href="?lang=romanian" name="romanian" class="estilo">
                        <img src="imagens/ro.svg">
                    </a>
                </li>
                <li>
                    <a href="?lang=georgian" name="georgian" class="estilo">
                        <img src="imagens/ka.svg">
                    </a>
                </li>
                <li>
                    <a href="?lang=greek" name="greek" class="estilo">
                        <img src="imagens/el.svg">
                    </a>
                </li>
            </ul>

        </li>
    </div>

Language Selector CSS:

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    background-color: #FBC6C6;
    background-image: none;
}

.btn-group {
    background-color: transparent;
    border-top-left-radius: 5px;
}

.btn-group:hover {
    border-top-left-radius: 0px;
}

.dropdown-menu {
    min-width: 100%;
}

.language-selector .dropdown-menu {
    -moz-background-clip: padding;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-background-clip: padding-box;
    -webkit-border-radius: 3px 3px 3px 3px;
    background: var(--preto-meio-transparente);
    background-clip: padding-box;
    border: none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 10px;
    margin: 0;
    /*overflow: none;*/
    padding: 0;
    width: auto;
}

.language-selector .dropdown-menu>li {
    border-bottom: none;
}

.language-selector .dropdown-menu>li a {
    -moz-background-clip: padding;
    -moz-border-radius: 0;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -webkit-background-clip: padding-box;
    -webkit-border-radius: 0;
    -webkit-transition: all 300ms ease-in-out;
    background-clip: padding-box;
    border-radius: 0;
    color: black;
    display: block;
    font-weight: lighter;
    margin: 0;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 0px;
    padding-top: 5px;
    transition: all 300ms ease-in-out;
}

.language-selector .dropdown-menu>li a img {
    margin-right: 5px;
    vertical-align: middle
}

.language-selector .dropdown-menu.pull-right {
    -moz-background-clip: padding;
    -moz-border-radius: 3px 0 3px 3px;
    -webkit-background-clip: padding-box;
    -webkit-border-radius: 3px 0 3px 3px;
    background-clip: padding-box;
    border-radius: 3px 0 3px 3px;
    margin-right: 5px;
}

.language-selector {
    margin-top: 0;
}

.language-selector>.dropdown-toggle {
    -moz-background-clip: padding;
    -moz-border-radius: 3px;
    -webkit-background-clip: padding-box;
    -webkit-border-radius: 3px;
    background-clip: padding-box;
    border-radius: 3px;
    display: inline-block;
    padding: 10px 0px;
}

.links-list {
    padding-bottom: 8px;
    padding-top: 14px;
    white-space: nowrap;
}

.list-inline {
    color: var(--ouro-elegante);
    font-weight: normal;
    list-style: none;
    padding-left: 5px;
}

.list-inline>li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

.list-inline>li:first-child {
    padding-left: 0;
}

#menu-0 {
    position: absolute;
    z-index: 999;
}

.scrollable-menu {
    height: auto;
    max-height: 100px;
    overflow-x: hidden;
}

a.estilo {
    color: var(--ouro-elegante);
    text-decoration: none;
}

ul.estilo, ol.estilo {
    margin-bottom: 8.5px;
    margin-top: 0;
}

Nicescroll parameters:

<script type="text/javascript">
$(function() {  
    $("html").niceScroll();
});

var nice = false;
$(function() {  
    nice = $("html").niceScroll();
});

var nice = $("#beleza").getNiceScroll();

$(function() {  
    $("#beleza").niceScroll({cursorcolor:"#00F"});
});

</script>

[inuyaksa]

Hi, this a complex problem to solve, because nicescroll need to know when list open and close. So you need to notify nicescroll when update scrollbar or hide it.

Here my code example: https://jsfiddle.net/inuyaksa/wo7vev7w/15/

[gusbemacbe]

Hey Inuyaksa, wow...

How do I discover which class belongs to Bootstrap's tag (for example, hide.bs.dropwdown and show.bs.dropdown belongs to dropdown and show.bs.modal and hide.bs.modal belongs to modal)?

Thank you!

Gustavo

[inuyaksa]

Correct... it's not relate to nicescroll... anyhow you found infos from this page: https://v4-alpha.getbootstrap.com/components/modal/#events