Dropdown using Office UI Fabric not rendering properly


while designing apps office using office ui fabric components.

i facing issue in designing drop-down.

its coming shown in below image.

i have included files in 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.


hi pooja,

do mean there are no items in dropdown list? if so, share html , related js reproduce issue in simple html page?

i made test below, 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 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, suggest refer 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 click "mark answer" responses resolved issue, , click "unmark answer" if not. can beneficial other community members reading thread. if have compliments or complaints msdn support, feel free contact msdnfsf@microsoft.com.



Microsoft Office for Developers  ,  Apps for Office and SharePoint  >  Developing Apps for Office 2013



Comments

Post a Comment

Popular posts from this blog

Azure DocumentDB Owner resource does not exist

having same error microsoft.azure.documents.documentclientexception: message: {"errors":["owner resource not exist"]} , scenario. when deployed webapp azure , try document docdb throws error. docdb exists in azure , contains document looking for. weird local machine(running vs) works fine. i'm using same settings in azure , local. have , idea this. thanks Microsoft Azure  >  Azure Cosmos DB
Read more

BizTalk Server 2013 Azure VM Log Shipping and HA for hosts

hi , background: for our customer, having a  2 biztalk , 1 sql setup of environment. [biztalk server 2013 azure vms provisioned azure gallery, sql server 2012 azure vm ]. in current configuration, there no high availability or disaster recovery plan set. want implement dr , possibly ha configuration on these servers. i have few questions regarding same. please let me know thoughts on same. currently writing log files (log shipping files) mounted/attached drive same sql server. how move these log files across secondary site since shared storage not supported. in case of sql server crash, losing log files since reside on same server. please share options on how can move these periodically between datacenters. for hosts pop3, ftp need host clustering (which requires biztalk machines present on windows cluster traditionally), please let know how achieve in azure scenario thanks , regards, ujjwal devarapalli -ujjwal you can refer article, issue azure vm lo...
Read more

How to Share webservice object to all user

dear all,            how share webservice object user. in pageload i have created webservice object in pages.so performance level go down.            shall create application level mean it's possible share object in user?             if 1 ,it occur deadlock or anyother problem?             or else how share webservice object user.             please me.... advance you. regards, santhosh you can use application object. if updating application object, can use  application.lock(); , then  application.unlock(); thanks, nishanth mohan visit places in london free!!! a large collection of english / hindi / malayalam / tamil sms messages a large collection of english / hindi / malayalam / tamil s...
Read more