2016-07-24 3 views
0

Ich habe ein Projekt mit jQuery Mobile und Bootstrap. Bis jetzt ist es mir gelungen, Inkompatibilität zu managen, aber damit habe ich ein Problem.Dropdown-Optionen nicht sichtbar mit jQuery mobile und Bootstrap

Problem ist mit Dropdown (html-select) -Liste, nach dem ersten wählen Sie eine Option, das nächste Mal, wenn die offene Liste gibt es keine sichtbaren Optionen in es. Ich vermute, dass zwischen den jQuery Mobile- und Bootstrap-Bibliotheken ein CSS-Konflikt besteht.

Problem kann gelöst werden, wenn ich Bootstrap aus dem Projekt entfernen oder Reihenfolge (jetzt Bootstrap ih hinter jQuery Mobile) ändern, aber ich kann das nicht tun, weil viele andere Dinge nicht funktionieren. Ich möchte nur für dieses Drop-Down-Element etwas reparieren. Könnte jemand helfen?

Beispiel: https://jsfiddle.net/7whnhjc5/

<!--jQuery UI--> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

<!--jQuery UI Mobile --> 
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 

<!-- Bootstrap --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

<select name="status" id="status" data-mini="true"> 
    <option value="Start">Start</option> 
    <option value="S1">S1</option> 
    <option value="S2">S2</option> 
    <option value="S3">S3</option> 
    <option value="S4">S4</option> 
    <option value="S5">S5</option> 
    <option value="S6">S6</option> 
    <option value="S7">S7</option> 
    <option value="F1">F1</option> 
    <option value="F2">F2</option> 
    <option value="F3">F3</option> 
    <option value="End">End</option> 
</select> 

Antwort

0

Getestet habe ich diese ohne CDNs (Online-Referenzen). Ich denke dieses Problem aufgrund der Verwendung von CDNs. Versuchen Sie ohne CDNs

+0

Ich habe alle Bibliotheken lokal und das gleiche Problem verschoben. Nichts hat sich geändert. – SaleCar