La dimensione modale semantica-ui continua ad estendersi fino all'altezza di una pagina

Question

Sto cercando di implementare una modale di base, ma la sua dimensione viene mantenuta estesa all'altezza di una pagina.

codice di attivazione:

$('.ui.modal.apply-modal').modal('show'); 

Modal Codice:

<div class="ui modal apply-modal"> 
<i class="close icon"></i> 
<div class="header"> 
    Modal Title 
</div> 
<div class="content"> 
    facebook 
</div> 
<div class="actions"> 
    <div class="ui button">Cancel</div> 
    <div class="ui button">OK</div> 
</div> 

Answer 1

Si scopre che Bootstrap pacchetto è in conflitto con Semantic-UI pacchetto che uso.

semplicemente facendo:

meteor remove twbs:bootstrap 

Le cose sono risolti. Certo, non è una soluzione ideale, ma non dovrei comunque usare entrambi i framework allo stesso tempo.

Bene, dopo circa due ore di debug ....

Answer 2

Ho avuto lo stesso problema. La mia soluzione era modificare il CSS del componente modale dalla Semantic interfaccia utente in questo modo:

.modal { position: relative;} or #myModal { position: relative;} 

<div id="myModal" class="ui small modal"></div> 

Funziona per me, spero di aiutarvi. Sono d'accordo con Michael Khait, questo problema si verifica forse per qualsiasi conflitto tra Boostrap e Semantic UI