Modal width

[kaoz70]

Hello, is there a way to set a modal's width, its currently set to 850px by CSS, but I would like to create a dialog with a small amount of text and its too big for this:

But it would be great to get this:

Without overriding the CSS, because I would still like to use large modals.

I checked the source code and the docs, it seems the only properties you can set are title and content.

[artf]

I checked the source code and the docs, it seems the only properties you can set are title and content.

Correct, probably it would be great to let it pass custom attributes... a PR would be welcome

[kaoz70]

OK, what I'm thinking is to create a function to be able to set the width like: setWidth('400px'), and also a method to set custom attributes: setAttributes({'data-custom-attribute': 123}).

I think 2 functions are needed because the width is controlled by CSS, and so is the modal's design, so just letting the user set the width is good enough in this case. The attribute function would be for any other case that's needed

What do you think?

[artf]

Good idea, but to be honest, for now, I'd simply add a new attributes option to the open function and apply them to the main container by taking care of keeping the original class.
So, in your case, you'd add a new class on open and the additional CSS to make that modal larger

[sunnykgupta]

I can help with this, @artf, let me know if it is okay to contribute.

[artf]

@sunnykgupta sure if @kaoz70 is not already on it, it would be great

[kaoz70]

Hello, sorry I'm piled with work now, if @sunnykgupta can give this a shot it would be great.

[marcepoblet]

Correct, probably it would be great to let it pass custom attributes... a PR would be welcome

Hi,

This change was introduced in grapesjs?

we have some property to change the size of the modal?

[artf]

I'll add the attributes option to the open() method in the next release

[marcepoblet]

I'll add the attributes option to the open() method in the next release

Perfect thanks

[ronaldaug]

For those who don't know how to use modal attributes.
You can add option opts.attributes to modal's open method as below.

const modal = editor.Modal;
const opts = {
       attributes: { class:'my-custom-class', id:'my-custom-id' }
}
modal.open(opts);

Because I didn't find how to use it in the documentation here.