Followup question on modal dialogs. When I inspect the element, the styling appears to be set directly in the HTML. Is there a way to change the width of the popup from 100% for example?
<div tabindex="-1" role="dialog" style="position: fixed; height: auto; width: 100%; top: 253.014px; left: 0px; display: block;" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-dialog-buttons" aria-describedby="backdrop-modal" aria-labelledby="ui-id-1"> ... </div>
Thanks.
Looks like that dialog box was generated from the jQuery UI Dialog Widget, which does have an option to specify width, so maybe?
https://api.jqueryui.com/dialog/
What page is the modal dialog showing up on?
Looks like that dialog box was generated from the jQuery UI Dialog Widget, which does have an option to specify width, so maybe?
https://api.jqueryui.com/dialog/
What page is the modal dialog showing up on?
Thanks, I'll try that.
I'm using the tags to pop up a small form as a modal dialog, as in this post: https://forum.backdropcms.org/forum/modal-forms-using-webform
Actually, that doesn't quite work. I want to make it responsive, but the element is hard-coded in the HTML with a width of 100%. If I add a class to the box, the HTML will still override whatever CSS width I set.
I can set an explicit width, e.g. 600px, but then it'll be too wide for a phone. On the other side, the 100% width looks silly on a larger display.
Have you tried overriding the dialog class (or even specifying other dimensions) by using "data-dialog-options"? See for example these lines in core:
- In installer_browser_manual_install_link()
There are other examples in core...
No, I haven't. I'll look into it and come back with any questions. Thank you.
@argiepiano - I took a look at the examples you posted. But where would I put this code?
How are you creating the link that triggers the dialog? Programmatically? Or only adding the "use-ajax" class?
The "data-dialog-options" is an html tag attribute that the javascript uses to modify the dialog. So if you are manually typing your link that triggers the dialog somewhere (for example in a Views text field, or inside a text field in a node), then you could try adding that attribute, as in:
<a href="my-path" class="use-ajax" data-dialog="true" data-dialog-options="{"width":700,"dialogClass":"project-dialog"}">My link</a>
Notice the HTML entities such as ", which are the result of HTML encoding the string that results from running json_encode() on the options.
Oh, OK. Putting it into the HTML in a node textfield is what I tried earlier, with the problems I mentioned in this comment.
I see. The solution then is to assign a css class that provides max-width to override the inline width, as follows:
Link:
<a href="/in-dialog" class="use-ajax" data-dialog="true" data-dialog-options="{"dialogClass":"test-dialog"}">link</a>
CSS:
@media (min-width:600px) {
.test-dialog {
max-width: 600px;
}
}
Result on a computer screen (600px):
Result on a small device screen (takes 100%):
Oh, yes, of course. That should work perfectly. Thanks!!
One thing though. The dialogClass property does work as you've suggested, but the documentation at
https://api.jqueryui.com/dialog/
says that it's now deprecated in favor of the "classes" property. That one doesn't work though. Not a big deal as I have something working now but wanted to make a note of it.
Thanks again!
Oops ... duplicate deleted.
I see. The solution then is to assign a css class that provides max-width to override the inline width, as follows:
Link:
<a href="/in-dialog" class="use-ajax" data-dialog="true" data-dialog-options="{"dialogClass":"test-dialog"}">link</a>CSS:
@media (min-width:600px) { .test-dialog { max-width: 600px; } }Result on a computer screen (600px):
Result on a small device screen (takes 100%):