Metronic Dropdown missing JS include? #5644

davidharrison created 5 years ago

Hi guys,

I'm trying to use the Metronic Dropdowns as seen here: https://keenthemes.com/metronic/preview/?page=components/base/dropdown&demo=default

I've replicated the code as shown in the demo but the dropdown functionality isn't working, which will be js driven? There seems to be a js file used in the demo site, dropdown.js, that whilst present in .net zeros source files, isn't included in the views?

Do I need to include the file in a js bundle, and if so, how do I do this, or do I need to do something else to include dropdown.js?

Thanks,

David

Go to accepted answer

5 Answer(s)

0

alirizaadiyahsi created 5 years ago

What did you tried(share code)? What is the error? What is your project type and version?

There are dropdown examples in ASP.NET Zero, already. Aren't they working too? Or just newly added ones doesn't work?

davidharrison created 5 years ago

Hi Alirizaadiyahsi,

The project is ASP.NET Core MVC Zero Version 5.6.

There aren't any errors - a dropdown element placed in a view simply doesn't have the dropdown behaviour. Code example:

        <div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right" m-dropdown-toggle="click">
            <a href="#" class="m-dropdown__toggle btn btn-sm btn-primary dropdown-toggle">
                Dropdown - Click
            </a>
            <div class="m-dropdown__wrapper">
                <span class="m-dropdown__arrow m-dropdown__arrow--left"></span>
                <div class="m-dropdown__inner">
                    <div class="m-dropdown__body">
                        <div class="m-dropdown__content">
                            <ul class="m-nav">
                                <li class="m-nav__section m-nav__section--first">
                                    <span class="m-nav__section-text">Section</span>
                                </li>
                                <li class="m-nav__item">
                                    <a href="" class="m-nav__link">
                                        <i class="m-nav__link-icon flaticon-share"></i>
                                        <span class="m-nav__link-text">Activity</span>
                                    </a>
                                </li>
                                <li class="m-nav__item">
                                    <a href="" class="m-nav__link">
                                        <i class="m-nav__link-icon flaticon-chat-1"></i>
                                        <span class="m-nav__link-text">Messages</span>
                                    </a>
                                </li>
                                <li class="m-nav__item">
                                    <a href="" class="m-nav__link">
                                        <i class="m-nav__link-icon flaticon-info"></i>
                                        <span class="m-nav__link-text">FAQ</span>
                                    </a>
                                </li>
                                <li class="m-nav__item">
                                    <a href="" class="m-nav__link">
                                        <i class="m-nav__link-icon flaticon-lifebuoy"></i>
                                        <span class="m-nav__link-text">Support</span>
                                    </a>
                                </li>
                                <li class="m-nav__separator m-nav__separator--fit">
                                </li>
                                <li class="m-nav__item">
                                    <a href="#" class="btn btn-outline-danger m-btn m-btn--pill m-btn--wide btn-sm">Logout</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Similar dropdown classes used in the top navigation bar (i.e. notifications uses a dropdown element) so relevant js is included/works in the top menu but not in the view body?

1

alirizaadiyahsi created 5 years ago

Hi @davidharrison, Metronic v5.5 they changed data-dropdown-toggle="click" to m-dropdown-toggle="click". The example that you look is new version(5.5) of metronic, but in ASP.NET Zero metronic is not updated(it will Zero v6.0) yet.

SOLUTION: use data-dropdown-toggle="click" instead of m-dropdown-toggle="click". It should work.
0

alper created 5 years ago
Support Team

and set as selected solution if it works for you.
0

davidharrison created 5 years ago

Thank you for your help @alirizaadiyahsi, much appreciated and really helped me out.

Have an answer to this question? Log in and write your answer.