Vertically-centered AlertBox and MessageBox

#1 · September 13, 2019, 3:39 pm

Earlier today, I told @luishp that I was looking into some Bootstrap plugins that allow alert messages to be shown 'vertically-centered' on the screen. He advised me that he had found a way to do this with the native AlertBox and MessageBox commands.

As per his suggestion, I am creating this post so he can share details of the solution with the entire community.

asmat has reacted to this post.

#2 · September 14, 2019, 9:08 am

Thanks @gaev!
It's possible to center on screen any modal window just adding this code in Project > Properties > Styles

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.modal.fade .modal-dialog {
  transform: translate(0, -100%);
}
.modal.in .modal-dialog {
  transform: translate(0, 0);
}

CDY@44 and asmat have reacted to this post.

#3 · September 14, 2019, 9:31 am

This other CSS method will allow you to specify the width and height of the AlertBox or MessageBox:
The animation is also more subtle:

.modal-dialog {
  width:350px;
  height:200px;
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  margin:auto;
}

The same code is also valid for any Dialog (just change the DialogContainer1 for the appropiate name):

#DialogContainer1{
  width:350px;
  height:200px;
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  margin:auto;
}

CDY@44 has reacted to this post.

#4 · September 14, 2019, 3:16 pm

@luishp

Thanks ... will try out suggestions tomorrow.

#5 · September 16, 2019, 8:20 pm

@luishp

More good news ... using the .modal-dialog css, AlertBox displayed as expected ... I was also able to position it horizontally at a run time specified position ... and hide the box until it is moved ... here is the crude (delays hard coded at Design Time) technique ... I plan to enhance it in the future by using a Timer Object

AlertBox "Alert Box" "Vertically Centered; 200px left of center" ""

Wait 100
   BeginJS
      $('.modal-dialog').css('visibility', 'hidden');
   EndJS
EndWait

Wait 200
   BeginJS
      $('.modal-dialog').css('left', '200px');
      $('.modal-dialog').css('visibility', 'visible');
   EndJS
EndWait

IMPORTANT NOTE - the way Wait/EndWait works, the second Wait parameter (200 is from the AlertBox command (not the end of the first Wait command).

Also, now that Dialogs can be manipulated at run time, one such container can be used to simulate an AlertBox.

Vertically-centered AlertBox and MessageBox - Forum

Vertically-centered AlertBox and MessageBox