Modal Centering not working

Bootstrap Studio Help
1

I'm attempting to create a centered modal. Bootstrap's website provides example code for accomplishing this.

I add modal-dialog-centered to this line via the attributes inspector like so:

<div class="modal-dialog modal-dialog-centered" role="document">
...
</div>

My modal presents, but it doesn't seem to respect the modal-dialog-centered class, just the modal-dialog class. Ideas, anyone?

2

For some reason, the factory method doesn't work by just adding modal-dialog-centered to the modal-dialog class. I got it to work with the following rule added to CSS:

.modal-dialog {
    transform: translate(0, -50%);
    top: 50%;
    margin: 0 auto;
}
3

Oops...I take it back. Once I fill in more content in the model, the centering is off. If anyone's got a suggestion how to make the "factory" class work, I'm all ears.

4

The CSS that the app is using is a beta version. The Bootstrap Dev's sites modal example is using the recently release stable version in which this "new" method is available. The app Dev's have recently stated that the next release of the app v4.1 will have the stable release bootstrap.css.

So for now, if you inspect the Bootstrap Dev's sites modal example, you will see the CSS that you can grab to put into your custom CSS in the app for now.

.modal-content {
  width:100%;
}

.modal-dialog-centered {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  min-height:calc(100% - (.5rem * 2));
}

@media (min-width: 576px) {
  .modal-dialog-centered {
    min-height:calc(100% - (1.75rem * 2));
  }
}

That should be what you need to use that feature for now.

Saj