Dynamic Sizing of Dialog Boxes

Question

I'm working on a PWA for a chromebook(schools) and I'm wondering what the most best way to have dynamic sizing of dialog boxes.

I have methods set up for each HTML element that we can use and pass the values we need for this (input/checkbox/label) etc - so I have multiple dialog boxes with the same classes but required different sizing.

I have some basic stuff like

    .modal {
  min-width: 390px;
  max-width: 600px;
  display: none; /* Hidden by default */
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 0px;
  border: 1px solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
  border-radius: 6px;
  font-size: 14px;
}

I also thought of adding a width value to send when creating the dialogs but I don't like that solution. Something that gets the width of the largest element and adds 10px padding to that or something?

Is there something that I'm missing that could be an easy solution? (It's also ideally vanilla javascript)

Answer 1

If I've understood your question correctly, you are trying to create a class for modal popup windows that will be a different size depending on the content inside, and that you can toggle visibility on using Javascript.

Perhaps too simple of a solution, but have you considered using padding as a replacement for the min-width value in your css?

Something like margin: 0; padding: 0.5vw 195px; /* instead of min width, use padding */

This will set the width of the element to 390px(195px padding-left, 195px padding-right) + width of html content, (see codepen below).

https://codepen.io/KXNG420/pen/eYdvZgN

As for setting a max-width you could add in a quick check when you are toggling the visibility of the modal window.

Hopefully this at least helps a little bit.