Rendere ridimensionabile il modal Bootstrap con il problema dell'interfaccia utente jQuery

Question

Quindi ho un modal Bootstrap che ho creato e sto cercando di renderlo ridimensionabile usando jquery. Ho il ridimensionamento che funziona in orizzontale, ma se provi a ridimensionare verticalmente il suo contenuto all'interno del modale non è contenuto nell'elemento che sto tentando di ridimensionare.

Ho provato a utilizzare la proprietà 'ancheResize' su .resizable() e ho incluso tutti i div all'interno del modale ma ciò sembra causare altri problemi.

$('.modal-content').resizable({ 
    alsoResize: ".modal-header, .modal-body, .modal-footer" 
}); 

Ecco il mio esempio: https://jsfiddle.net/p7o2mkg4/

Answer 1

Si effettivamente fatto tutto bene! Ma il comportamento predefinito degli elementi HTML overflow è visible. Quindi, se il contenuto dell'elemento genitore viene traboccato, escono dal modale e questo non sembra buono! Pertanto, è necessario impostare la proprietà CSS overflow su scroll o hidden per correggere l'interruzione su piccole dimensioni. Prova ad aggiungere:

.modal-content.ui-resizable { 
    overflow: scroll; 
} 

Ciò garantirà lo scorrimento sull'overflow dell'elemento.

Link JSFiddle:https://jsfiddle.net/p7o2mkg4/1/

Answer 2

questo funziona (css)

#myModal>div{ 
overflow-y: hidden; 
overflow-x: hidden; 
}