Impact on movable dialog position of resizing browser window.

[RaphaelVanierBentley]

Hello,

We have a dialog which has the attribute movable={true}. We are trying to align this dialog position to the bottom with CSS, when the feature is started, the dialog look like this:

But if we resize the dialog, shrink it and remaximize it again, it end up at the center of the screen:

The problem seem to be that when the dialog is movable, a transform: translate(98px, -323px); css style is applied inline on the iui-dialog tag which overwrite any placement CSS styles like top, bottom, left and write.

Is this a bug or a feature? Can it be fixed somehow?

Thanks.

[GerardasB]

Hey @RaphaelVanierBentley, I assume you are using https://www.itwinjs.org/reference/core-react/dialog/dialog
which is just a wrapper around https://itwinui.bentley.com/docs/dialog and might hide some of the configurability options (i.e. currently you can not pass custom className or style props to Dialog.Main component which makes it tricky to override aforementioned transform or other attributes).

Seems like iTwinUI 2.x sets the left/top property https://github.com/iTwin/iTwinUI/blob/f54da675967786e09938ff6ed24f32c049222193/packages/itwinui-react/src/core/Dialog/DialogMain.tsx#L156 which might be the culprit of your complication.
Could you confirm, that you can implement the desired behavior with iTwinUI Dialog component?

Do you have a sandbox or a gif that showcases the interaction?

[RaphaelVanierBentley]

Here is the problem with the left/top property, in our case, we want the dialog to be aligned to the bottom of the screen, not the top. Trying to calculate the bottom of the screen and placing fixed number in the top wont work if the user start resizing the window.

We have partially solved the problem by applying a CSS bottom tag, but that get overwritten by the translate(...) if the dialog is movable.

I have added a 30 second video capture of my screen where I show the problem. If you need more, please tell me.

Thanks for the help.

Dialog-bottom-align-problem1.mp4

[GerardasB]

Do you intentionally set a movable flag? Just trying to understand how that part of the interaction would behave.
I.e.

1. The user moves the dialog.
2. The user resizes the page.

Do you expect the dialog to jump back to the initial position?

[RaphaelVanierBentley]

Yes, in this case the movable flag is set to true, its a feature that we had and don't want to change it to false if possible.

And yes, I expect dialog to jump back to its original position if the user resize the page, always ~10px from the bottom.

Is there a trick to make this possible if the movable={true}?

Thanks

[GerardasB]

As discussed, you should use Dialog component from @itwin/itwinui-react for better customizability. Here's the closest I got (note that the initial position isn't working correctly since we cannot pass down style prop to the Dialog.Main component), but the dialog jumps after resizing. https://www.itwinjs.org/sandboxes/GerardasB/pin-dialog-to-status-bar
Use at your own risk, this is not a proposed solution.

[RaphaelVanierBentley]

Hi, thank you very much for taking the time to produce a sandbox code that work. This is the closest to a working solution we can get. We will keep your code and see how we can introduce it in our solution.

This is issue is resolved, Thanks again!