J'ai un modal avec une taille fixe. Il contient plusieurs volets sélectionnables avec des boutons de navigation. Sur l'un des volets, j'ai un div contenant une grille d'images miniatures et un bouton en bas. Actuellement, les images et le bouton s'étendent bien au-delà du bas de la fenêtre modale. Je voudrais que le bouton reste en bas du volet et que la hauteur restante du volet soit occupée par la vignette div.row , dans laquelle si le contenu de l'image ne rentre pas dans le div.row , le contenu défile.
Ma tentative pour cela était de rendre le volet flex-column et de rendre le overflow-auto div.row overflow-auto , mais cela n'a aucun effet.
HTML
.modal {
&.modal-base {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&-overlay {
position: absolute;
z-index: 2000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
&-window {
background: #fff;
border-radius: 4px;
margin: auto;
position: relative;
width: 400px;
height: 300px;
z-index: 2001;
.close {
position: absolute;
right: 2px;
top: 2px;
color: gray;
font-size: 25px;
z-index: 2002;
}
}
&-content {
width: 100%;
height: 100%;
padding: 20px;
}
}
CSS (scss)
<div class="modal modal-base">
<div class="modal-overlay"></div>
<div class="modal-window">
<div class="close">×</div>
<div class="modal-content">
<div class="nav-wrapper">
<ul class="nav nav-pills flex-row" role="tablist">
<li class="nav-item">
<a class="nav-link mb-3 active" href="#" role="tab">Image List</a>
</li>
<li class="nav-item">
<a class="nav-link mb-3" href="#" role="tab">Upload</a>
</li>
</ul>
</div>
<div class="card shadow mb-0">
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active d-flex flex-column" role="tabpanel">
<div class="row overflow-auto">
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
</div>
<button type="button" class="btn btn-primary w-100 btn-lg">Insert</button>
</div>
<div class="tab-pane fade" role="tabpanel">
<div class="upload-widget"></div>
<div class="text-center mt-2">
<button type="button" class="btn btn-primary">Upload</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Utilisation du framework CSS Bootstrap 4. Le code JS pour le changement de volet a été omis car il est superflu. J'aimerais une solution qui ne m'oblige pas à fixer la hauteur du div contenant les images.
Remarque: il s'agit d'une suite de la question posée ici . Dans cette question, j'avais simplifié ma configuration pour faciliter la vie de tout le monde et j'ai pu obtenir une solution fonctionnelle pour cette configuration simplifiée, mais cela ne semble pas fonctionner une fois traduit sur la configuration réelle que j'ai, d'où cette question.
Merci d'avoir regardé ma question!
3 Réponses :
Vous devez inclure un overflow:auto; ou faites le code css sur votre élément conteneur
containing element {
content:"";
display:table;
clear:both;
}
L'élément conteneur est déjà overflow: auto : <div class="row overflow-auto">
Fournissez simplement votre div contenant la classe de carte avec la propriété de débordement appropriée comme ceci:
<div class="card shadow mb-0" style="overflow-x: hidden; overflow-y: scroll;">
Si nous faisons ce que vous suggérez, tout le contenu de la carte défilera, y compris le bouton. J'ai besoin que le bouton reste en bas de son volet et que seul le contenu de l'image dans ce volet défile.
J'ai résolu ce problème (avec l'aide d'un ami en ligne) en quelques heures, permettez-moi de partager les connaissances acquises.
Essentiellement, la flexibilité est la voie à suivre ici. Nous avons besoin de flex dans le volet pour garder le bouton en bas tandis que les images occupent l'espace restant avec le débordement de défilement. Nous devrions également faire en sorte que les div englobantes aient une hauteur de 100% (.tab-content, .card-body).
Lorsque nous arrivons à la .card elle-même, c'est là que les choses se compliquent. Nous voulons qu'il remplisse le parent, mais appliquer h-100 ici n'est pas acceptable car il a un frère, sa hauteur ne devrait pas être 100% de la zone de contenu parent, mais plutôt 100% - hauteur du wrapper .nav. C'est proche de ce que nous voulons, mais pas tout à fait.
On dirait que nous avons besoin d'un autre flex ici pour permettre au .card de se développer juste dans l'espace restant, mais si vous définissez le flex ici, il n'est pas respecté et la carte s'étend bien en dehors du modal. La sauce secrète est que par défaut, la .card avec .d-flex obtient min-height: auto, et cela signifie qu'elle ne rétrécira pas plus petit que la taille de son contenu. Le réglage de la hauteur min: 0 sur la carte div résout le problème. Comme je ne vois aucun utilitaire Bootstrap pour ce faire, j'en ai ajouté un moi-même dans le monde à cette fin pour l'utiliser également à l'avenir.
.modal {
&.modal-base {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&-overlay {
position: absolute;
z-index: 2000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
&-window {
background: #fff;
border-radius: 4px;
margin: auto;
position: relative;
width: 400px;
height: 300px;
z-index: 2001;
.close {
position: absolute;
right: 2px;
top: 2px;
color: gray;
font-size: 25px;
z-index: 2002;
}
}
&-content {
width: 100%;
height: 100%;
padding: 20px;
}
}
.d-flex > .flex-shrink-content {
min-height: 0;
}
Le code complet / démo peut être trouvé ici pour ceux qui sont intéressés: Codepen
<div class="modal modal-base">
<div class="modal-overlay"></div>
<div class="modal-window">
<div class="close">×</div>
<div class="modal-content d-flex flex-column">
<div class="nav-wrapper flex-grow-1">
<ul class="nav nav-pills flex-row" role="tablist">
<li class="nav-item">
<a class="nav-link mb-3 active" href="#" role="tab">Image List</a>
</li>
<li class="nav-item">
<a class="nav-link mb-3" href="#" role="tab">Upload</a>
</li>
</ul>
</div>
<div class="card flex-shrink-content shadow">
<div class="card-body h-100">
<div class="tab-content h-100">
<div class="tab-pane fade show active d-flex flex-column h-100" role="tabpanel">
<div class="row flex-grow-1 overflow-auto">
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
<div class="col-6 mb-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
</div>
</div>
<button type="button" class="btn btn-primary w-100 btn-lg mt-2">Insert</button>
</div>
<div class="tab-pane fade h-100" role="tabpanel">
<div class="upload-widget"></div>
<div class="text-center mt-2">
<button type="button" class="btn btn-primary">Upload</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.d-flex > .flex-shrink-content {
min-height: 0;
}
C'est ce que tu cherches? codepen.io/sergeysolin/pen/KKMbjYm?editors=1100
@inser Ouais, à peu près! Bien que je préfère utiliser overflow-auto au lieu d'augmenter la classe .shadow, vous avez frappé dans le mille. Si vous pouviez expliquer un peu pourquoi c'est nécessaire à la fois sur div.row et div.shadow, je serais très obligé (et assurez-vous également de soumettre comme réponse afin que je puisse accepter + vote positif).
@inser Oh attendez tant pis, je vois que vous avez mis le bouton dans le pied de page de la carte. Cela signifie qu'il sera visible sur tous les volets, mais je veux uniquement que le bouton soit présent sur l' un des volets.