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)

Consider using a css framework, that will spare you a lot of time and nerves. If you don't want to use frameworks, then you can checkout how they handle such problems. Most of them are open source. — tipos, Dec 14 '20 at 20:13
Sorry I should have mentioned the PWA isn't for like phones. It's for chromebooks for schools - so adding like bootstrap or something to make the whole thing responsive isn't really ideal. I will check out other css frameworks - thanks — , Dec 14 '20 at 20:29

score 1 · Answer 1 · answered Dec 14 '20 at 21:31

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.

Hey! sorry for the delay, moved onto a different branch and then holidays... This is exactly what I'm using this for - and that is a great simple solution. Thank you very much! — , Jan 04 '21 at 22:51

Dynamic Sizing of Dialog Boxes

1 Answers1