Position centering Webdialog

HI Guys,

I tried to search this forum on how to make Webdialog show up on the center of the screen.

Your help will be very much appreciated.

It should show in the center of the browser window when its a Modal dialog.
Are you talking about a Palette dialog?

Hi Albin,

Yes im talking about Pallete dialog. It was not shown at the center.

It was shown at top most, left most of the screen everytime I invoked it.

I want it to show at the center. Please share me your tricks on how to do it.

Thanks in advance.

It’s just a little bit of math…
You can do it with the following:

  • WebDialog.Top
  • WebDialog.Left
  • WebDialog.Height
  • WebDialog.Width
    and
  • WebPage.Width
  • WebPage.Height

Have fun :slight_smile:

Thanks Alex.

But my objective is to center the Webdialog on screen not from host Webpage.

Any solution?

This is not possible. A WebDialog (as any other control in a web project) can only be displayed within the browser, notably the area displaying the WebPage.

Thanks Alex,

I saw a good sample on how to make window centered but its only applicable for Desktop application. The code uses screen(0).width.

how about for web app getting the screen size of pc or device? Do you have idea on how to retrieve it from XOJO?

Web and desktop applications are totally different.
A desktop application runs right on top of the operating system.
A web application runs inside a web browser only. All a web application knows about a client is data about the browser. There’s only very few a web app can get to know about the operating system and its hardware. This kind of information has to be passed through by the browser, which not all do.

You cannot retrieve the client’s screen resolution natively in Xojo. But you can go through the hassle of JavaScript:

Some browsers might restrict that information, however.
I honestly would not mess with that data. A browser does not need to be full screen. Just think of having a browser window sharing screen space with a text application, both sharing parts of the screen. Or consider a multiple screen set up. It gets messy…

What are you really trying to do? Maybe there are better solutions for your purpose.

Now I get it.

Honestly, Im experimenting some scenario where user has small screen computer. If I create a Webdialogbox that was design for 800x600 resolution, and the user pc is lower that it, the Webdialog visual becomes awful.

Anyway, its a matter of explanation to the user.

Your response is very helpful to me.
I becomes more and more motivated learning XOJO as my replacement to other programming tools.

[quote=215367:@ronaldo florendo]Honestly, Im experimenting some scenario where user has small screen computer. If I create a Webdialogbox that was design for 800x600 resolution, and the user pc is lower that it, the Webdialog visual becomes awful.
[/quote]

That’s exactly what the WebPage size is for!

A WebPage is shown within a browser window. That browser window displays some own stuff (like the address bar, buttons etc.) and provides a display area for web content. A WebPage will always fill that display area of the browser window. You cannot display anything outside of that area. When you get the width and height of a WebPage, you will know what the dimensions are you can use to display your content (like a web dialog).

Hence, I would recommend to get the WebPage dimensions with the properties linked above. And then either show different WebDialogs based on the available space (I do that for mobile devices) or design your WebDialog in a way it can resize nicely.

Another thought: Instead of doing a WebDialog, why not just go for another WebPage (with a back button?) that fills the entire display area within a browser window?

Nice one!

Thanks!

To center a WebDialog inside a calling WebPage you can proceed with these two lines of code in the Open event of the WebDialog:

'WebDialog Open Event
Self.Left = (WebPageCalling.Width - Self.Width) / 2
Self.top = (WebPageCalling.Height - Self.Height) / 2

Change WebPageCalling with your calling WebPage name.