Open a dialog box in center of screen

(0) Share

Report

Posted on by petewalburn

185

Hi,

I have an app with buttons that need to load up a dialog box. Just now I have a group of controls to simulate a dialog box, consisting of a rectangle with textboxes, labels and buttons all dynamically positioned to be within the rectangle wherever it is on the screen.

How would I always make the rectangle pop up in the center of the screen? I currently set the X coordinate to: Parent.Width/2-Self.Width/2 and the Y coordinate to: Parent.Height/2-Self.Height/2

However the screen is scrollable, so this positions the "dialog" in the center, but only if the screen is scrolled to the middle. It would be good if it was possible to detect the current scroll position and then set the Y coordinate appropriately.

It would also be good if the user could select and drag the "dialog" box around the screen.

Has anybody done something similar with dialog boxes?

Pete

Categories:

Building Power Apps

I have the same question (0)

All responses (9)

Answers (0)

Sort by

BideyYusuf 387 on at

Like
a
(0)

Report
Copy link

Link copied!

Hey @petewalburn . its good to want to achieve dynamics functionalities. It quite good.

Try (Parent.Width - Self.width)/2 for X axis
(Parent.Height - Self.Height)/2 for Y axis
Ensure that .. your dialog box is not too big, so that it can sit well at the center of your screen.

Was this reply helpful? Yes No
petewalburn 185 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi,

Unfortunately, that keeps the "dialog" box in the same place. (Parent.Height - Self.Height)/2 is the same as Parent.Height/2 - Self.Height/2, but probably is simpler.

I really need to be able to detect the scroll position of the canvas.

Pete

Was this reply helpful? Yes No
BideyYusuf 387 on at

Like
a
(0)

Report
Copy link

Link copied!

send the snapshot of your screen and dialog box, so that we can understand how to achieve the best result. @petewalburn

Was this reply helpful? Yes No
petewalburn 185 on at

Like
a
(0)

Report
Copy link

Link copied!

Here is a snapshot of the screen:

This shows the "dialog" form in the center, but if the canvas is scrolled to a different position before pressing the "Edit Action" button, then the "dialog" box is not centered on the screen.

This is because the screen is a Scrollable screen.

Pete

Was this reply helpful? Yes No
BideyYusuf 387 on at

Like
a
(0)

Report
Copy link

Link copied!

Hey @petewalburn , What do you have below the dialog box. was that an ordinary form or a container?
If its a container or a form, since the scrolling happens on the form/container (I need to know which one of it you have there),...

you might want to use the width & size of the form/container below the dialog box as the parameter of centralizing it. for example, instead of using Parent.Width-Self.width, you use form/container.width - self.width and vice versa

Was this reply helpful? Yes No
petewalburn 185 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi,

It is on a Container. But using the (Container.Height-Self.Height)/2 has the same issue, because the container is scrollable, so can be scrolled so that the button for activating the "dialog" box can be at the top of the display or the bottom (or anywhere in-between).

Pete

Was this reply helpful? Yes No
BideyYusuf 387 on at

Like
a
(0)

Report
Copy link

Link copied!

@petewalburn pls, do you want to scroll up and down at the same time while the dialog box is on the screen?
is your container taking the whole real-estate of the screen as well?
this is what we can use to determine the course of action.

because i have this same scenario in one of my apps, and it works well for me.

Was this reply helpful? Yes No
petewalburn 185 on at

Like
a
(0)

Report
Copy link

Link copied!

It would be handy to still be able to scroll up and down to be able to view other things on the screen.

The container is actually below another container and the height of both together is greater that the screen height so that the screen can be scrolled.

Pete

Was this reply helpful? Yes No
BideyYusuf 387 on at

Like
a
(0)

Report
Copy link

Link copied!

I understand @petewalburn .
In order to make it work the way you need, you might have to use the primary Main container, as the parameter. for example... (MainScreenContainer.Width - Self.width)/2 X axis & (MainScreenContainer.Height - Self.Height)/2. Y axis.

Look at the attachment for example of how the Blue box is centralised while i scroll the records.

Let me know if this works for you.

Was this reply helpful? Yes No