Smaller modal dialog?

[Apfelstrudel]

Hi,

I just added a ips modal dialog (data-ipsdialog-modal) for guests showing a small "Register first" message. The problem is that the dialog is always almost 95% wide but this looks very ugly with only a small sentence.

Is there any parameter for the a tag to show this dialog only with a custom width (i.e. max-width: 300px)?

I don't want to change max-width of .ipsDialog > div

... because of the other dialogs.

[Daniel F]

16 minutes ago, Apfelstrudel said:

don't want to change max-width of .ipsDialog > div

... because of the other dialogs.

You could make it smaller by adding data-ipsDialog-size='narrow' to your code

[Apfelstrudel]

That's what I was looking for. Thanks, Daniel.

Now it looks perfect.

[Daniel F]

BTW, following classes/options are available at the moment:

	/* Sizes */
	.ipsDialog.ipsDialog_narrow > div {
		max-width: 500px;
	}

	.ipsDialog.ipsDialog_medium > div {
		max-width: 850px;
	}

	.ipsDialog.ipsDialog_wide > div {
		max-width: 1000px;
	}

	.ipsDialog.ipsDialog_fullscreen > div {
		position: absolute;
		top: 30px;
		right: 30px;
		bottom: 30px;
		left: 30px;
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		margin: 0;
	}

They are also mentioned in our docs;) https://invisionpower.com/4guides/themes-and-customizations/javascript-framework/using-ui-widgets/ipsuidialog-r44/

 

You could also define your own size via the custom.css template 

.ipsDialog.ipsDialog_mini > div {
    max-width: 300px;
}

and call it via 

data-ipsDialog-size='mini'

 

[Apfelstrudel]

@Daniel F: Thanks for the additional infos but _narrow looks perfect.

But is it possible to open a modal dialog with a menu item?

[Joel R]

10 hours ago, Daniel F said:

BTW, following classes/options are available at the moment:

	/* Sizes */
	.ipsDialog.ipsDialog_narrow > div {
		max-width: 500px;
	}

	.ipsDialog.ipsDialog_medium > div {
		max-width: 850px;
	}

	.ipsDialog.ipsDialog_wide > div {
		max-width: 1000px;
	}

	.ipsDialog.ipsDialog_fullscreen > div {
		position: absolute;
		top: 30px;
		right: 30px;
		bottom: 30px;
		left: 30px;
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		margin: 0;
	}

They are also mentioned in our docs;) https://invisionpower.com/4guides/themes-and-customizations/javascript-framework/using-ui-widgets/ipsuidialog-r44/

 

You could also define your own size via the custom.css template 

.ipsDialog.ipsDialog_mini > div {
    max-width: 300px;
}

and call it via 

data-ipsDialog-size='mini'

 

Nominating this for IPS Dev Tip of the Week.