CODEWITHSUNDEEP
htmlcss
sivarajan
sivarajan

Reputation: 1

frame not showing expected results

I am using a frame. I want to show the frame in the remaining part of the webpage other than the place where explorer window appears. Frame is very small in size. I need this to be responsive. What changes i need to do in my code to get the expected result. please help me.

https://jsfiddle.net/user1989/2hpwayku/1/

<div style="width:100%; height:100%">
             <div  style="float:left; width:20% height:100%;">      


        <div class="example">
            <h2>Default options</h2>
            <div id="fileTreeDemo_1" class="demo"></div>
        </div>
        </div


        <!-----whole image goes here------------>
        <!--<div style="float:right; width:80%; height:100%" id="filediv">
        <iframe style="overflow:hidden;"></iframe>
        </div>-->
        <div id="demo" onclick="loadDoc()"style="float:right; width:80% height:500%;" ><h2>Let AJAX change this text</h2></div>
         <iframe id="upload_target" name="upload_target" ></iframe>
        </div>

css

<style type="text/css">
            BODY,
            HTML {
                padding: 0px;
                margin: 0px;
            }

            H1 {
                font-family: Georgia, serif;
                font-size: 20px;
                font-weight: normal;
            }

            H2 {
                font-family: Georgia, serif;
                font-size: 16px;
                font-weight: normal;
                margin: 0px 0px 10px 0px;
            }

            .example {
                float: left;
                margin: 15px;
            }

            .demo {
                width: 200px;
                height: 600px;
                border-top: solid 1px #BBB;
                border-left: solid 1px #BBB;
                border-bottom: solid 1px #FFF;
                border-right: solid 1px #FFF;
                background: #FFF;
                overflow: scroll;
                padding: 5px;
            }

        </style>

Upvotes: 0

Views: 54

Answers (2)

GibboK
GibboK

Reputation: 73938

Use vw css unit in order to set the width and height of your iframe as for percentage of the view port

Example: https://jsfiddle.net/2hpwayku/4/ 

   #upload_target {
      /*border: none;*/
      width: 100vw;
      height:100vw;
    }

Or use css media query in order to set the css for your iframe "dynamically" based on the windows size example:

@media only screen and (max-width: 500px) {
    /*css for your iframe here*/
}

Upvotes: 0

Bipu Bajgai
Bipu Bajgai

Reputation: 404

The best way to make your make your iframe responsive is setting it to width 100% width height auto.

CSS 

iframe{
    width: 100%;
    height: auto;
}

But not on all iframe width 100% height auto works well , example it doesnot works for youtube iframe video and so on .

i would suggest you to use css technique to make it responsive. http://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

Otherwise you can also find many Javascript which can make your iframe responsive according to content.

https://gist.github.com/aarongustafson/1313517

Upvotes: 1

Related Questions