HTML & CSS Set minimum with for HTML <dialog> ?

[cbreemer]

I am having fun with the HTML <dialog> element. I like that it adapts its size to fit snugly around its contents, however this can result in a ridiculously narrow element when there is little content. For that reason I want to set a minimum width for a dialog, but I cannot find how to do it. I tried the CSS minWidth attribute but that does not work (it only limits shrinking when you resize the browser window).
Any ideas appreciated 😊

 

[EkBass]

There is not a built-in CSS property to control the dialog's minimum width like you asked.

<dialog id="myDialog">
  This is a dialog content!
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

#myDialog {
  min-width: 300px; /* Set minimum widht here */
}

function enforceMinWidth(dialogId) {
  const dialog = document.getElementById(dialogId);
  const minWidth = dialog.style.minWidth; 

  if (dialog.offsetWidth < parseInt(minWidth, 10)) {
    dialog.style.width = minWidth;
  }
}

document.getElementById('myDialog').addEventListener('show', function() {
  enforceMinWidth('myDialog');
});

I did not test the code. just wrote it here so it works maybe. You might need to adjust something a bit. But gives you idea how to approach.

 

[cbreemer]

Thanks @EkBass, that is a clever and useful idea.
I tried it but unfortunately it does not work, the event listener is never fired. No surprise as the documentation says

HTML DOM Events​

Event	Occurs When	Belongs To
show	A <menu> element is shown as a context menu	Event

I cannot find an event that I could use for this purpose 🤔
Edit - I guess I could use the IntersectionObserver API. Will try that out.

 

[cbreemer]

IntersectionObserver does the trick, based on your idea.

    . . .
    const observer = new IntersectionObserver(applyMinWidth, { threshold: 0 });
    observer.observe(dialog);
    dialog.showModal();
}

function applyMinWidth()
{
    const minWidth = _d.style.minWidth;
    if (dialog.offsetWidth < parseInt(minWidth, 10))
        dialog.style.width = minWidth;
}

The only slight drawback is that the original narrow dialog (which unfortunately does not have the CSS styling applied yet) briefly flashes before it is set to the minimum width. It does not seem to matter what value of threshold I use. It's an ugly visual effect, so I may want to prefer seeing the narrow dialog.

 

[cbreemer]

For the record, I have enforced a minimum size by padding the header text (the first <div> in the dialog) with the necessary number of   characters.