none
Dropdown using Office UI Fabric not rendering properly RRS feed

  • Question

  • While designing Apps for office I am using Office UI Fabric components.

    I am facing issue in designing drop-down.

    Its coming as shown in below image.

    I have included files like this in my html page:

    <script  src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
     <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
     <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.2/fabric.min.js"></script>

    and calling "$('.ms-Dropdown').Dropdown();" on document load.


    Wednesday, December 28, 2016 2:35 PM

All replies

  • Hi Pooja,

    Do you mean there are no items in your dropdown list? If so, could you share us your html and related js which could reproduce your issue in a simple html page?

    I made a test with below, it works correctly.

    //html reference
        <script src='https://cdn.rawgit.com/mikewheaton/Office-UI-Fabric-Releases/master/1.2.1/js/jquery.fabric.min.js'></script>
    <script src='https://rawgit.com/mikewheaton/Office-UI-Fabric-Releases/master/1.2.1/js/jquery.fabric.min.js'></script>
    //html dropdown
            <div class="ms-Dropdown" tabindex="0">
                <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
                <select class="ms-Dropdown-select">
                    <option>Choose a sound&hellip;</option>
                    <option>Dog barking</option>
                    <option>Wind blowing</option>
                    <option>Duck quacking</option>
                    <option>Cow mooing</option>
                </select>
            </div>
    //js
    Office.initialize = function (reason) {
          $(document).ready(function () {
          $('.ms-Dropdown').Dropdown();
          var element = document.querySelector('.ms-MessageBanner');
          messageBanner = new fabric.MessageBanner(element);
          messageBanner.hideBanner();
          loadProps();
        });
      };

    In addition, I suggest you refer the link below:

    # Dropdown component doesn't work
    https://github.com/OfficeDev/office-ui-fabric-core/issues/251

    Best Regards,

    Edward


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Thursday, December 29, 2016 8:06 AM