I am currently working on a project where I am using a modal window to display an iframe. The webpage within the iframe is quite wide, so I have adjusted the width accordingly. However, the modal itself is situated in the center of the screen, causing the modal window to extend beyond the right side of the screen and preventing me from viewing the entire content of the iframe. My dilemma lies in wanting to position the modal on the left side of the screen.
Despite trying various solutions from different online sources and forums, including attempting the method provided below:
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
position: fixed;
margin: auto;
width: 320px;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
// Remaining CSS styles...
https://codepen.io/bootpen/pen/jbbaRa
After incorporating this example into my codebase, I found that the modal continued to open in the middle of the screen instead of the left as desired. I've attempted adjusting margins, removing conflicting CSS blocks, and even deleting other irrelevant CSS snippets, all to no avail. It seems as though something is overriding the modal positioning, which is perplexing since I've streamlined the CSS to only include necessary styles.
As a Bootstrap 4 user with minimal custom styling apart from the default Site.css sheet, I'm at loss for identifying the root cause of this issue. Any insights on isolating the problematic element would be greatly appreciated!
UPDATE: Below is a snippet of the HTML code from my page, in case there's any interference present:
@using System.Configuration
@model ProdSplitScreen.Models.PressModel
@{
// Razor syntax logic...
}
// Remaining HTML content...
<footer class="demo-footer">
<a href="http://www.bootpen.com" target="_blank">Get more code snippets</a>
</footer>
A screenshot has been attached showcasing the modal wrongly aligning itself to the top-middle section of the screen for reference: Screenshot Link