Simon Price Simon Price - 3 months ago 19
CSS Question

Bootstrap gird row same height

I know this question has been asked a number of times but for my problem the proposed solutions are not working.

I am presenting a PDF to a user in a modal along side a form. Image below.

enter image description here

The problem I am having is that the iframe is set at 100% for the maximum size it will go to at 100% is as per the image.

If I give is a fixed size of 435px; it sizes to the right aspect for my screen. As I need this to be screen agnostic I want it to size its self according to the modal that it appears in.

I have tried using the working example from here http://www.bootply.com/92230 and this example is the same as I have seen all over the web this morning.

The HTML for this is

<div class="row">
<div id="equalheight">
<div id="loa" class="col-md-6 demo NotShown">
<iframe src="\\sqlmuldvwsk06.ukskpre.santanderuk.pre.corp\Public\CMCFileUpload\LOAFiles\SRA557034_321043.004.pdf" class="mh100Percent mw100" frameborder="0" scrolling="no">
<p>It appears your web browser doesn't support iframes.</p>
</iframe>
</div>
<div id="custDetails" class="col-md-12 demo">
...
</div>

</div>
</div>


The reason I am having to use an iFrame is because I am working on an application that is for internal use on a corporate LAN and when I try and embed the pdf as an object I get an Access Denied error.

Also, when an event if fired, the div custDetails is resized to a
col-md-6
and when the modal is finished with the divs are resized \ reclassed.

Any and all help on how to show the iFrame the same size as the form next to it would be great.

thanks

Simon

Answer
<style>
    .row-eq-height {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    iframe {
        height: 100%;
        position: absolute;
    }
</style>

<div class="row row-eq-height">
    <div id="loa" class="col-md-6 demo NotShown">
        <iframe
            src="\\sqlmuldvwsk06.ukskpre.santanderuk.pre.corp\Public\CMCFileUpload\LOAFiles\SRA557034_321043.004.pdf"
            class="mh100Percent mw100" frameborder="0" scrolling="no">
            <p>It appears your web browser doesn't support iframes.</p>
        </iframe>
    </div>
    <div id="custDetails" class="col-md-6 demo">
        ...
    </div>

</div>

Hope this will work

Comments