Warning: these changes work with Xojo2020r1, future features for Web 2.0 may conflict or these changes will not be needed. Please see the release notes and changes for the next release(s)
- Making the WebDialog show vertically centered
There is a Bootstrap class called .modal-dialog-centered that needs to be present on this Xojo code to vertically center the WebDialog. Currently, there is no way to tell Xojo that we want this instead of showing it at the top.
This is the code that needs to be changed:
<div class="modal-dialog mw-100" role="document" style="width: 354px;">
to
<div class="modal-dialog modal-dialog-centered mw-100" role="document" style="width: 354px;">
For me, there is no easy way to modify that line and be sure that Xojo will not refresh is removing my changes, so the idea here is to use modal-dialog class and set it to always be vertically centered. In other words, you can only have all the WebDialogs displaying at the top of the window or all displaying vertically centered. For that you just need to add this code to the App HTML Header
<style>
.modal-dialog {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
min-height: calc(100% - 1rem);
}
</style>