Come faccio a visualizzare questo fontpicker in modo corretto all'interno di un bootstrap modale con una scheda

Sto usando il fontpicker trovato here. L'ho messo dentro un modale e ha funzionato bene. Ora, ho messo la navigazione delle schede all'interno del modale e il fontpicker non viene visualizzato correttamente. (Il pulsante per la prima modale è quello rotto.Il pulsante per la seconda modal è un esempio della stessa cosa, ma senza la navigazione a schede.)Come faccio a visualizzare questo fontpicker in modo corretto all'interno di un bootstrap modale con una scheda

Ho impostato style = "overflow-y: visibile ; altezza massima: 500 px; " in entrambi i casi.

My Fiddle

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"/> 


    <script> 
    $(document).ready(function(){ 
      $('select#fonts1').fontSelector({}); 
      $('select#fonts2').fontSelector({}); 
     }); 

    </script> 

</head> 


<body> 

    <!-- Button to trigger modal --> 
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Fontpicker w/ modal and tabbed</a> 
    <a href="#myModal2" role="button" class="btn" data-toggle="modal">Fontpicker w/out the tabbed navigation</a> 

    <!-- Modal --> 
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body" style="overflow-y:visible; max-height:500px;"> 

     <ul class="nav nav-tabs"> 
      <li><a href="#tab1" data-toggle="tab">Tab 1</a></li> 
     </ul> 

     <div class="tab-content"> 
       <div id="tab1" class="tab-pane" style="overflow-y:visible; max-height:500px;"> 

       <select id="fonts2"> 
        <option value="Chelsea Market">Chelsea Market</option> 
        <option value="Droid Serif" selected="selected">Droid Serif</option> 
        <option value="Ruluko">Ruluko</option> 
        <option value="Ruda">Ruda</option> 
        <option value="Magra">Magra</option> 
        <option value="Esteban">Esteban</option> 
        <option value="Lora">Lora</option> 
        <option value="Jura">Jura</option> 
        </select> 
       </div> 

     </div> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
    </div> 


     <!-- Modal --> 
    <div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body" style="overflow-y:visible; max-height:500px;"> 

     <select id="fonts1"> 
        <option value="Chelsea Market">Chelsea Market</option> 
        <option value="Droid Serif" selected="selected">Droid Serif</option> 
        <option value="Ruluko">Ruluko</option> 
        <option value="Ruda">Ruda</option> 
        <option value="Magra">Magra</option> 
        <option value="Esteban">Esteban</option> 
        <option value="Lora">Lora</option> 
        <option value="Jura">Jura</option> 
        </select> 

    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
    </div> 


</body> 
</html>

fonte

2013-02-22 Marissa Levy

impostazione dello z-index non sembra funzionare –

Sono sorpreso che nessuno abbia una risposta –

Questa domanda probabilmente è passata sotto il radar in quanto è stata pubblicata in un'ora non di punta su questo sito. –

Aggiungi questo alla tua CSS:

.tab-content { 
    overflow: visible !important; 
}

Perché funziona:

Attualmente, le schede jQuery UI .tab-content proprietà overflow è impostato su auto . Ciò significa che verranno utilizzate le barre di scorrimento invece di consentire al contenuto di fuoriuscire dalla finestra di dialogo, motivo per cui il menu a discesa è nascosto alla vista (e devi usare le minuscole barre di scorrimento per vederlo effettivamente).

È necessario sovrascrivere la proprietà di overflow CSS dell'interfaccia utente predefinita di jQuery con visibile al posto di auto, per ottenere l'effetto desiderato.

Vedere il violino aggiornato, con il CSS nella casella CSS:

http://jsfiddle.net/samliew/kTXB7/3/

fonte

2013-03-04 02:50:12

Il problema qui è overflow:auto impostato su .tab-content elemento.

Rimuovere l'overflow e funzionerà correttamente. Attenzione però: quella proprietà abilita la barra di scorrimento verticale quando c'è troppo contenuto per una modale, quindi basta usarla a seconda di ciò che si sta visualizzando in essa.

fonte

2013-03-04 02:53:59 rochal

thx ma è finito con la risposta di Sam come era un po 'più veloce e ha avuto un violino. –

non preoccuparti, ha svalutato la sua risposta me stesso – rochal

Come faccio a visualizzare questo fontpicker in modo corretto all'interno di un bootstrap modale con una scheda

risposta

Problemi correlati