Unable to get the correct value of .Top for WebDialog Box

Hello,

For WebDialog Box in modal mode, it is automatically centered. How do I check the value of .Top of WebDialog?

MsgBox Str(WebDialog1.Top)

will always returned a value of 0.

I need to know the correct value of WebDialog1.Top

Please find the test project here:-
link text

(Webpage1.height - WebDialog1.height) / 2 should tell you that value.
With Javascript you could get the value of the div.

The problem is that our WebDialog coordinate system includes the dark overlay.

What is it that you are trying to accomplish? Maybe there’s a different way to get there you haven’t thought of.

Hello Marius,

There is no WebPage opened as the WebDialog is displayed in the Session Open Event. I had tried using javascript but it seems still display a value of 0.

me.ExecuteJavaScript("var elem = document.getElementById('"+ Me.ControlID + "').getBoundingClientRect(); window.alert(elem.top)")

Hello Greg,

I am trying to move the WebDialog window upwards as some text is hidden by the WebDialog when it is centralised.

Alvin, controls such as WebDialogs are composed of several elements. What you do here with your JavaScript is get the coordinates of the grey overlay. To get the actual webdialog, you must get to the element inside.

Use the browser developers tools to see the elements corresponding. I suggest Chrome which is IMHO the best because it outlines elements as you go through the code.

[quote=308958:@Alvin Lim]Hello Marius,

There is no WebPage opened as the WebDialog is displayed in the Session Open Event. I had tried using javascript but it seems still display a value of 0.

me.ExecuteJavaScript("var elem = document.getElementById('"+ Me.ControlID + "').getBoundingClientRect(); window.alert(elem.top)")

[/quote]

There is a DIV in that div. The id is: Me.ControlID + “_body” that should be the div with the correct value

Have you tried just changing it to a Sheet instead of just a modal dialog?

I’m still a little confused though. Are you saying that text that is on the dialog is hidden by that very same dialog? Could you show us a screenshot?

btw. I just tested to set the .top of your dialog. in my Chrome on OSX that works fine.
See your example to have it 50px higher:

https://drive.google.com/file/d/0B1BP7Vj-0q8aTjFSNTBMYzZtcWM/view?usp=sharing

Hello Marius,

Yes, with Me.ControlID + “_body”, I can get the correct value. Thank you for pointing that out.

Hello Greg,

Sorry for the confusion. Please see the screen shot link:-
link text

Give a man a fish and he eats for one day. Teach him to fish and he will eat his whole life.

Try to look at your dialog with the developer tools, to see how and where that value is found. I could have given it to you as well, but I think you will develop much more powerful skills if you learn how to explore the DOM.

[quote=308964:@Michel Bujardet]Alvin, controls such as WebDialogs are composed of several elements. What you do here with your JavaScript is get the coordinates of the grey overlay. To get the actual webdialog, you must get to the element inside.

Use the browser developers tools to see the elements corresponding. I suggest Chrome which is IMHO the best because it outlines elements as you go through the code.[/quote]

Haha Mr Michel, in fact I had located the element after you had suggested to me to look at the browser developers tools. Please see attached screen shot:- [quote]https://www.dropbox.com/s/eea76a0e46t2tl8/inspector.png?dl=0[/quote]

I have start learning to fishing for almost 2 weeks. So I am still “green” in this area. Please bear with me. Thank you for your comments and concerns. Without helpful guys like you and the rest, I think I won’t be able to survive in this area. :slight_smile:

Alvin, what you found is the CSS values apparently.

What you want to do is to explore the elements of the body, until you find the element. Here is a screen shot of what I am talking about. See the dialog on the left in blue because the code is selected, and on the right, the dialog element _body.

Click on the small pic to see full size

We all started some time. I see that you want to learn. You are doing great. Seeing you already exploring JavaScript was a very good surprise. Keep up the good work :slight_smile:

Thanks for your compliments. I hope there is this day where I can contribute to the Xojo community as well. :slight_smile: