I am struggling to get the modal to appear on the right side of the screen with a specific width and height. However, it seems to be displaying differently on different screen sizes.
For instance, on small screens, only half of the modal is visible while on larger screens, it only takes up three-quarters of the space.
Below is my HTML code for the modal:
div#myModal.modal.open {
display: block;
opacity: 1;
transform: scaleX(1);
top: 13vh !important;
left: 129vh;
width: 58vh;
background-color: #37373b !important;
height: 100%;
}<div id="myModal" class="valign-wrapper modal modalHeight" style="height:100%; overflow-x:hidden;">
<div class="modal-content right">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Approval Form</h4>
<button class="modal-close close dashboardClose" data-dismiss="modal" onclick="close()" aria-label="Close"><span aria-hidden="false">×</span></button>
</div>
<div class="modal-body modalHeight">
</div>
</div>