Dialog Top and left

Targets Web
1

In Web2. All dialogs are centered and X pixels from the top. Perhaps bootstrap is forcing this.

I have an internal web app where the user have 36" monitors. And a dialog popping up in the top center makes little sense.

Anyone know if you can hack the CSS to move the Dialog by setting top and left? (Or any other way for that matter)

2

Modify your bootstrap theme? Web2 users are now required to know CSS. Web1 tried to hide the details.

3

Yea. I agree with your sentiment. And I have had the ā€˜discussionā€™ with the the powers that be at Xojo. But I canā€™t wait for 2023 r1 or probably later. I need a fix now.

On the bright side I like how Ricardo is fixing things that were previously considered ā€œnot a bugā€.

1 Like
6

To change all dialogs to the same position you can add to App HTML Header:

<style>
.modal-dialog {
   position: absolute;
   top:150px;
   left:150px;
}
</style>

If you want to set each dialog, this seems to work correctly (at least right now)
App HTML Header

<style>
.modal-dialog {
   position: absolute;
}
</style>

WebDialog1 Opening event:

//add top left
ExecuteJavascript( "$('#" + me.ControlID + "_modal').css({'top': '150px', 'left': '150px'});" )

If you want to use the same dialog but change the position use the same Style above and use this when you create the dialog:

Var dlg As New WebDialog1
ExecuteJavascript( "$('#" + dlg.ControlID + "_modal').css({'top': '150px', 'left': '150px'});" )
dlg.Show

change the top/left values as needed.

A GIF to show what I get:
dialogtopleft

3 Likes
7

If you donā€™t want to alter the App HTML Header you can use:

Var dlg As New WebDialog1
ExecuteJavascript( "$('#" + dlg.ControlID + "_modal div:first').css({'top': '50px', 'left': '50px', 'position': 'absolute'});" )
dlg.Show
1 Like
8

Extending what @AlbertoD posted I wrote an extends function:

Public Sub PositionWebDialog(Extends d as WebDialog, Top as integer, Left as Integer)
  
  d.ExecuteJavascript( "$('#" + d.ControlID + "_modal div:first').css({'top': '" + top.ToString + "px', 'left': ' " + Left.ToString + "px', 'position': 'absolute'});" )
  
End Sub

Call it like this from a button press for example:

Var Left As Integer = Me.Left 
Var top As Integer = Me.Top + Me.Height 

Var dlg As New WebDialog1
dlg.PositionWebDialog( top, Left )
dlg.Show