Grapesjs: Modal width

Created on 21 Feb 2020  路  9Comments  路  Source: artf/grapesjs

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:

image

But it would be great to get this:

image

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.

enhancement help wanted

All 9 comments

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

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?

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

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

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

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

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?

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

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

Perfect thanks

Was this page helpful?
0 / 5 - 0 ratings

Related issues

applibs picture applibs  路  3Comments

alibouaziz picture alibouaziz  路  3Comments

faizansaiyed picture faizansaiyed  路  3Comments

ryandeba picture ryandeba  路  3Comments

YashPrince picture YashPrince  路  3Comments