Comment créer un modal ajustable à son contenu? Materializecss

-2

Est-ce que quelqu'un sait comment adapter Modal à son contenu? Quand je mets une image avec une largeur plus petite que la largeur modale, il y a beaucoup d'espace inutilisé autour d'elle. Voici codepen https://codepen.io/hetsketch/pen/LjYvOp?editors=1100#0 Comment créer un modal ajustable à son contenu? Materializecss

<html> 
<head> 
    <title>Something gym related</title> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
</head> 
<body> 
    <a class="modal-trigger waves-effect waves-light btn" id="chest" href="#modal1">Modal</a> 
<!-- Modal Structure --> 
<div id="modal1" class="modal"> 
    <div class="modal-content"> 
     <img src="http://www.motsandco.com/wp-content/uploads/avatar-1-300x300.png" alt=""> 
    </div> 
    <div class="modal-footer"> 
     <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a> 
    </div> 
    </div> 
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
<script type="text/javascript" src="js/script.js"></script> 
</body> 
</html>

Mais je veux SMTH comme ceci:

Source

2017-07-25 hetsketch.

Il y a deux problèmes ici:

.modal a une largeur de 55%.
.modal a position: fixed à la fois right: 0 et left: 0, de sorte que les div se dilate (Voir What does "top: 0; left: 0; bottom: 0; right: 0;" mean?)

Je avais mis width: auto, right: auto et left: 50% avec transform: translateX(-50%) au centre modal. Voir mis à jour CodePen.

(Note: Je l'ai utilisé !important pour remplacer vos styles externes, vous ne devriez pas faire cela, mais changer les styles propres à la source)

Source

2017-07-25 07:49:47

Si vous utilisez cette méthode de centrage, vous devez vous assurer que la largeur modale n'est pas supérieure à la largeur de la fenêtre. Si c'est le cas, vous perdez la possibilité d'accéder à une partie du côté gauche du modal, égale à la moitié de la différence entre la largeur du modal et la largeur de la fenêtre. Un simple '.modal {max-width: 90vw;}' fera l'affaire (ou '100vw', si vous préférez). En outre, pour une raison quelconque, en utilisant le positionnement absolu, le modal obtient une barre de défilement verticale lorsque la fenêtre d'affichage n'est pas assez grande, aucune idée de pourquoi, je suis en train d'examiner la situation. –

Merci @AndreiGheorghiu! _Also: Upvoted votre réponse car c'est clairement mieux :) :) –

Merci. La barre de défilement verticale concerne également le positionnement absolu. Si vous inspectez le modal, vous verrez qu'il est rendu en dehors du corps lorsque la hauteur de la fenêtre est petite. Cette technique de centrage 50/50 est bonne pour les petites choses. Lorsque le contenu centré est plus grand que le parent, il a quelques problèmes. À votre santé! –

L'affichage de votre modal est faite par display de basculement none à block, en utilisant JavaScript. Et il a une largeur de 55%.

Pour que sa largeur s'ajuste à son contenu, vous devez définir son affichage sur inline-block. Pour lui faire outrepasser la spécificité de l'attribut style défini par JavaScript, vous devez lui donner !important. Mais cela remplacerait également le display:none lorsqu'il n'est pas visible. Et il ne semble pas y avoir de classe appliquée pour que vous puissiez vous connecter et que vous ne stylisiez que le modal en mode ouvert.

Mais vous pouvez facilement résoudre cela en utilisant flexbox. Il suffit de l'envelopper dans un modal parent display:flex:

<div class="center-modal"> 
    <div id="modal1" class="modal"> 
    ... 
    </div> 
</div>

.center-modal { 
    display: flex; 
} 
.center-modal .modal { 
    position: relative; 
    width: auto; 
}

Mise à jour codepen.

Source

2017-07-25 08:13:28

Comment créer un modal ajustable à son contenu? Materializecss

Répondre

Questions connexes