È possibile ingrandire la modalizza materialize.css e rimuovere la barra di scorrimento verticale?

Question

Ho appena creato pulsanti che fanno apparire una modale dopo aver cliccato e ogni pulsante ha una modale che mostra una diversa gif di esercizi. Tuttavia le modali sono troppo piccole e impedisce all'utente di vedere l'intera gif, costringendole a scorrere verso il basso. Voglio rimuovere la barra di scorrimento e rendere la modale più grande in modo che l'utente possa vedere l'intera gif. Qualsiasi aiuto sarebbe grande, ecco il mio codepen https://codepen.io/anon/pen/gPwved

HTML

<div id="modal1" class="modal"> 
    <div class="modal-content"> 
     <h4></h4> 
     <p></p> 
    </div> 
    <div class="modal-footer"> 
     <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a> 
    </div> 
    </div> 

jQuery- ho creato 6 su funzioni di clic con ID diverso, questo è un esempio di uno di loro, vedere il mio codepen se è necessario l'intero codice

$("#chest").on("click", function() { 
     $("h4").html("Bench Press"); 
     $("p").html("<img id='yo' src='https://45.media.tumblr.com/860edb05e3f8b0bf9b4313a819e87699/tumblr_mi2ud72e931qet17vo1_400.gif'>"); 
     $("#modal1").openModal("show"); 
    }); 

Answer 1

sì, ciò che si richiede può essere facilmente impostato.

Per aumentare la larghezza del modal, basta regolare la larghezza della classe .modal

.modal { width: 75% !important } /* increase the width as per you desire */ 

Per aumentare l'altezza del modal, aumentare la max-height della classe .modal, in questo modo

.modal { width: 75% !important ; max-height: 100% !important } /* increase the width and height! */ 

per impedire lo scorrimento del modal, basta aggiungere la proprietà di overflow-y: hidden alla classe modale, in questo modo

.modal { width: 75% !important ; max-height: 100% !important ; overflow-y: hidden !important ;} /* increase the width, height and prevent vertical scroll! However, i don't recommend this, its better to turn on vertical scrolling. */ 

Per maggiore personalizzazione, dovresti inserire questo come un css personalizzato in un foglio css separato come mycustomstyles.css e caricarlo come ultimo foglio di stile nell'intestazione.

Ecco la codepen - https://codepen.io/anon/pen/LGxeOa