WebDialog align

Targets Web
1

I am unable to align a webdialog instance at all. What am I doing wrong?
I have tried it with all its properties (left, right, lock…) and with webStyle.

On desktop computers and tablets it always aligns them to the center and top and on mobile phones top and to the left, unless you put the mobile phone horizontally, which aligns it top and to the center

2

As far as I know, the WebDialog in Web2 is always center and top.

3

And what use are the position and style properties of the webdialog class for?

2 Likes
4

The documentation says that the Left property is read-only. All LockXXXX properties also read-only.

In theory (I haven’t used the WebStyle) you can use the Style to change some things like turning the text bold (according to the documentation).

If something is not correct in the documentation please file a bug report.
If there is a feature that you want to be added to the WebDialog, file a feature request.

Hope this helps.

Edit: if you want CSS/JS to modify what Xojo can currently do, then someone can help you with that.

5

Thank you Albert. In my desire for an easy solution, I hadn’t noticed that position properties are read-only.

With webcontainer I sometimes use i_webContainer.Style.Value(“left”)=“50%” and it works to center it horizontally. But I don’t know if it’s because I’m doing something wrong or because it’s not directly compatible, this doesn’t work with webdialog.

My question was to confirm if, as you say, the position of a webdialog is unalterable or if I was doing something basic wrong.

I know that by default its position is centered, but on narrow screens like mobiles in a vertical position it aligns it to the left.

6

Found this method in forum (sorry, can’t recall who posted this first).
Paste into the Module level.
Usage:
WebDialog event (Opening):
Me.ModalCentered

Public Sub ModalCentered(Extends v As WebDialog)
  v.ExecuteJavascript("document.getElementById('" + v.ControlID + "_body').style.centered {" + _
  "position: fixed; top: 50%; Left: 50%; transform: translate(-50%, -50%); };")
End Sub
7

Thank you Asian.
I still haven’t gotten it to work for me but I’ll try to test in that direction.

8

Place this function in a module:

Public Sub Center(extends d as WebDialog)
  var j as new JSONItem
  j.Value( "position" ) = "fixed"
  j.Value( "top" ) = "50%"
  j.Value( "left" ) = "50%"
  j.Value( "transform" ) = "translate(-50%, -50%)"
  
  var exec() as String
  exec.Add( "setTimeout(function(){" )
  exec.Add( "  $('#" + d.ControlID + " .modal-dialog').css(" + j.ToString + ");" )
  exec.Add( "}, 10);" )
  
  d.ExecuteJavaScript( String.FromArray( exec, "" ) )
End Sub

Call from your WebDialog’s Opening event:

self.Center
5 Likes
9

Thank you very much Anthony.
This solution is perfect.

1 Like