basic dialog combined with an iframe

[tobiu]

hello together,

this is my first posting here. i really like the extJS project and i am testing to combine a rich text editor into the basic dialog. it already works perfectly, when i give the basic dialog and the iframe a static size, but when i try to make it fit dynamically, i am getting 2 problems.

the first (and smaller one) is, that the content shown in the basic dialog has a "border" of 5px. with margin:-5px it fits perfektly to the top and left, therefore of course 10px space to the other sides. any idea?

the second problem is the height. by setting it dynamically, it seems to be displayed static like 150px and does not resize at all. everything below is getting cut off (i set the scrolling to no, because the editor in the frame has an own scrollbar).

here is my code example. i shortened it as much as possible, to only show the problematic lines.

i already tested to give the iframe no size at all, also combined with a negative margin.

if you have any ideas, please let me know!


thanks a lot, tobiu



<script type="text/javascript">
var EditorBlog1Object = function(){

var dialogEditorBlog1, showEditorBlog1;

return {
init : function(){
showEditorBlog1 = Ext.get('onClickEditorBlog1');
showEditorBlog1.on('click', this.showEditorBlog1, this);
},

showEditorBlog1 : function(){
if(!dialogEditorBlog1){
dialogEditorBlog1 = new Ext.BasicDialog("EditorBlog1-dlg", {
autoScroll: false,
modal:true,
autoTabs:true,
width:596,
height:420,
shadow:true,
minWidth:300,
minHeight:300,
shim: false,
proxyDrag: true,
resizable: true
});
dialogEditorBlog1.dd.scroll = false;
dialogEditorBlog1.addKeyListener(27, dialogEditorBlog1.hide, dialogEditorBlog1);
dialogEditorBlog1.addButton('Save', EditorBlog1Object.save, EditorBlog1Object);
dialogEditorBlog1.addButton('Close', dialogEditorBlog1.hide, dialogEditorBlog1);
dialogEditorBlog1.on("resize",function(){}
);
}
dialogEditorBlog1.show(showEditorBlog1.dom);
},

save : function(){
top.EditorIFrameBlog1.document.getElementById("EditorIFrameFormBlog#iForumId#").submit();
dialogEditorBlog1.hide();
}
};
}();

Ext.EventManager.onDocumentReady(EditorBlog1Object.init, EditorBlog1Object, true);
</script>

<div id="EditorBlog1-dlg" style="visibility:hidden;position:absolute;top:0px;color:#000">
<div class="x-dlg-hd">my.blog</div>
<div class="x-dlg-bd">
<!-- Begin Component -->
<div class="x-dlg-tab" title="write topic">
<div class="inner-tab">
<iframe
style="background-color:#c8c8c8; padding:0px; border:0px; margin:-5px; width:100%; height:100%;"
src="/editor.php"
id="EditorIFrameBlog1" name="EditorIFrameBlog1" frameborder="0" vspace="0" hspace="0"
marginwidth="0"
marginheight="0" scrolling="no">
</iframe>
</div>
</div>
<!-- End Component -->
</div>
</div>
<br><br><br><br><br><br>
<img id="onClickEditorBlog1"
src="/media/pages/AbiBlog/b_ge_blogschreiben_0.gif" border="0" alt="write topic">

[tobiu]

just in case someone else has or will have the same problem:



dialogEditorBlog.on("resize",function(){

var iframetoresize = document.getElementById('EditorIFrameBlog1');
var iframeancestor = document.getElementById('EditorIFrameBlog1').parentNode.parentNode.parentNode;
var newwidth = iframeancestor.offsetWidth;
iframetoresize.width = newwidth;
var newheight = iframeancestor.offsetHeight;
iframetoresize.height = newheight;
}


and here the iframe details:



<iframe
style="background-color:#c8c8c8; padding:0px; border:0px; margin:-5px;"
src=""
id="EditorIFrameBlog1" name="EditorIFrameBlog1" frameborder="0" vspace="0" hspace="0"
marginwidth="0"
marginheight="0" width="588" scrolling="no" height="332" border="0">


this dynamically rezises the iframe to the actual size of the basic dialog and also sets the "inner margin" to zero.

with kind regards, tobiu