Is it possible to make a panel modal?

[coeamyd]

Dear Azure DevOps team,

for dialogs, it is possible to specify the lightDismiss option, if we don't want the dialog to close when clicking outside of it. However, as you mentioned in issue #16, we should use panels instead of dialogs. Since the openDialog does not allow us to specify a size, I have now used openPanel instead. However, now users accidentally click outside of the panel and lose all the work they've done in it. Is there a way to prevent this, or alternatively, specify a dialog size, so we can use dialog instead?

Thanks for any pointers!

Cheers, Christoph

[karelkral]

@coeamyd Just my piece of experience with dialogs. If you are using hosted dialog, you are right, you cannot specify size. But I am using CustomDialog and here you can specify dialog size by using CSS styles. But you can use this dialog only if you are using your own view type of Hub. Dialog size is then restricted by size of your hub only.

    <CustomDialog className="bolt-dialog-callout-content"
        calloutContentClassName="queue-new-poirot-dialog-callout"
        lightDismiss={false}
        onDismiss={this.props.onDismiss}
        modal={true}
    >
        ....

.queue-new-poirot-dialog-callout {
    min-height: 500px;
    height: 800px;
    width: 700px;
}

With panel, I cannot help. I am so frustrated by the lack of support from MS about this library.

[coeamyd]

@karelkral I feel you. The documentation is very lacking, so let's try to make the best of it. :-)

In my use case, I have an extended menu item, that is supposed to open the dialog/panel. So, I guess I cannot use the <CustomDialog>. In our custom hub, we are using the regular <Dialog>, which at least has the contentSize property. But, I cannot use this for the menu item.

[karelkral]

@coeamyd Yes, you are right, in this particular case you have to use hosted dialog or panel, there is no other way. Hosted dialog in this case has a bug and you cannot set its size. So a panel is the only way.