How to create a modal adjustable to its content? Materializecss

Question

Does anybody know how to make Modal fit to its content? When i put an image with width smaller than modal width there are a lot of unused space around it. Here is codepen https://codepen.io/hetsketch/pen/LjYvOp?editors=1100#0

<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>

But I want smth like this:

score 2 · Answer 1 · answered Jul 25 '17 at 08:13

The display of your modal is made by toggling display from none to block, using JavaScript. And it has a set width of 55%.

To make its width adjust to its contents, you'd need to set its display to inline-block. To make it override the specificity of the style attribute set by JavaScript, you'd need to give it !important. But that would also override the display:none when it's not visible. And there doesn't seem to be any class applied so you could hook in and only style the modal while open.

But you can easily solve this using flexbox. Just wrap the modal in a display:flex parent:

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

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

Updated codepen.

Odd · Answer 2 · 2019-10-09T07:14:51.397

While none of the suggestions did the 100% job for me, I experimented with width: max-content; CSS property.

HTML

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

CSS:

.modal-fit-content {
  width: max-content; /* note, you may sometimes have to use !important */
}

To keep it responsive, use the following way:

@media #{$extra-large-and-up} {
    .modal-fit-content {
      width: max-content;
     /* set width to auto or simply ignore the class on smaller screens */
    }
}

Jordi Nebot · Answer 3 · 2017-07-25T07:56:05.120

0

There are couple of issues here:

.modal has a width of 55%.
.modal has position: fixed with both right: 0 and left: 0, so the div expands (See What does "top: 0; left: 0; bottom: 0; right: 0;" mean?)

I'd set width: auto, right: auto and left: 50% with transform: translateX(-50%) to center the modal. See updated CodePen.

(Note: I've used !important to override your external styles, you shouldn't do that but change the proper styles in the source)

edited Jul 25 '17 at 07:56

answered Jul 25 '17 at 07:49

Jordi Nebot

3,355
3
27
56

If you use this method of centering you must make sure the modal width is not larger than the viewport width. If it is, you lose the ability to access a portion of the left side of the modal, equal with half the difference between modal's width and viewport's width. A simple `.modal { max-width: 90vw;}` will do (or `100vw`, if you prefer). Also, for some reason, using absolute positioning makes the modal get a vertical scrollbar when the viewport is not tall enough, no idea why, I'm looking into it. – tao Jul 25 '17 at 08:22
Thanks @AndreiGheorghiu! _Also: Upvoted your answer since it's clearly better_ :) – Jordi Nebot Jul 25 '17 at 08:25
1

Thank you. The vertical scrollbar has to do with absolute positioning as well. If you inspect the modal you'll see it gets rendered outside the body when the viewport's height is small. This 50/50 centering technique is good for small things. When the content centered is bigger than the parent, it has quite a few problems. Cheers! – tao Jul 25 '17 at 08:29

How to create a modal adjustable to its content? Materializecss

3 Answers3