Base solution for your next web application
Open Closed

Metronic Dropdown missing JS include? #5644

User avatar
0
davidharrison created

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)
  • User Avatar
    0
    alirizaadiyahsi created

    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?

  • User Avatar
    1
    davidharrison created

    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?

  • User Avatar
    1
    alirizaadiyahsi created

    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.

  • User Avatar
    0
    alper created
    Support Team

    and set as selected solution if it works for you.

  • User Avatar
    0
    davidharrison created

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

Assignee
No one
Labels
None yet