CODEWITHSUNDEEP
css
user243901
user243901

Reputation:

iframe size to fit in parent div

I've got the following html:

    <html>
<body>

<div id="note1" class="note">
    <div class="note-header">Note</div>
    <div class="note-content"></div>
</div>

</body>
</html>

with css:

body {
    background-color:black
}
.note {
    width: 150px;
    height: 150px;
    background: #111111;
}
.note h4 {
    text-align: center;
}
.note-header {
    background: #0b3e6f;
    color: #f6f6f6;
    font-weight: bold;

}
.note-content {
    height: 100%;
    width: 100%;
}
.note-editor {
    width: 100%;
    height: 100%;
}

And javascript that adds iframe to div.note-content:

$(function() {
    $("#note1").resizable().draggable({handle: ".note-header"});
    $('#note1').children('.note-content').append('<iframe id="rte" class="note-editor" ></iframe>');
    $('#rte').contents().attr("designMode", "on");
});

The problem is that iframe size apears to be bigger then div.note-content size. Parent div is resizable. how can i make iframe fit in div.note-content? JSFiddle: http://jsfiddle.net/TTSMb/

Upvotes: 0

Views: 9399

Answers (2)

G&#244;T&#244;
G&#244;T&#244;

Reputation: 8053

The problem is that the iframe takes the size of the parent, of class note-content which takes the full size (width 100%, height 100%) of its parent note1. But note1 contains another div as well.

You need to change the height of the note-content.

Upvotes: 1

Claudiu
Claudiu

Reputation: 3261

WHy don't you specify a size on the iframe itself? That should most likely solve your issue here

Upvotes: 0

Related Questions