PDA

View Full Version : Form fields in iframe in border layout empty



Plymp
2 Jul 2008, 5:30 AM
I'm having a problem with forms inside iframes that are inside a border layout. I have a layout with an east, south and center panel. The center panel contains an iframe. When the entire page is loaded any form fields in the iframe are just white boxes and nothing happens when you click them (also right click doesn't do anything). When the iframe contents are reloaded the problem is gone. This only happens in IE 6 (don't have IE 7 at work), Firefox and Safari are fine (unfortunately the default client is IE 6). The ExtJS part of the code is:


Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout:"border",
hideMode:"offsets",
items:[
{
region: "east"
,contentEl: "east"
,title: " "
,split: true
,collapsible: true
,width: 300
,minWidth: 40
,margins: "2 0 0 0"
,layout: "accordion"
,layoutConfig:{ animate: true }
,items: [
{
contentEl: "east1"
,title: "Select study"
,border: false
,autoScroll: true
,collapsed: true
}
,
{
contentEl: "east2"
,title: "Select library"
,border: false
,autoScroll: true
,collapsed: true
}
,
{
contentEl: "east3"
,title: "Select dataset"
,border: false
,autoScroll: true
,collapsed: false
}
,
{
contentEl: "east4"
,title: "Search within library"
,border: false
,autoScroll: true
,collapsed: true
}
,
{
contentEl: "east5"
,title: "Favorites"
,border: false
,autoScroll: true
,collapsed: true
}
,
{
contentEl: "east6"
,title: "Debug"
,border: false
,autoScroll: true
,collapsed: true
}
]
}
,
{
region: "south"
,contentEl: "south"
,title: " "
,split: true
,collapsible: true
,height: 200
,minSize: 100
,margins: "0 0 0 0"
,layout: "fit"
,items:
new Ext.TabPanel(
{
border: false
,activeTab: 0
,tabPosition: "top"
,items: [
{
contentEl: "south1"
,title: "Sort"
,autoScroll: true
}
,
{
contentEl: "south2"
,title: "Filter"
,autoScroll: true
}
,
{
contentEl: "south3"
,title: "Hide columns"
,autoScroll: true
}
,
{
contentEl: "south4"
,title: "Freeze columns"
,autoScroll: true
}
]
}
)
}
,
{
region: "center"
,contentEl: "center"
,autoScroll: true
,split: true
,margins: "2 0 0 0"
}
]
});
});The relevant html is:


<div id="center" class="panel">
<iframe src="url-to-be-loaded" frameborder="0" height="100%" width="100%" marginheight="0" marginwidth="0" scrolling="auto" id="centeriframe" name="centeriframe">
Your browser does not support iframes...</iframe>
</div>A similar problem occurs if one of the accordions in the east panel contains an iframe. When the accordion is collapsed and then activated again the form fields are just white blocks.

Does anyone know a solution to this issue? It should probably be something with repainting or rerendering the iframe when it becomes visible, but I can't figure out how to do it (I'm a newbie). The easy solution: make FF the default client is not an option.

Plymp
3 Jul 2008, 6:45 AM
I haven't found a proper solution yet, but do have a dirty work around that seems to work. The document that gets opened in the iframe now contains the following script:


<script type="text/javascript">
function repaintForm() {
document.getElementById("numpage").style.fontSize="8pt";
}
var ourInterval = setInterval('repaintForm()', 1000);
</script>Numpage is the id of the select tag that needs to be 'repainted'. With setInterval the font-size is set to 8pt every second. It is already 8pt, but IE apparantly sees this as a trigger to repaint the field. So a form in an iframe in an accordion will at most be a stupid white box for one second when it becomes active.

The javascript keeps running though so it might cause performance issues (haven't noticed any yet). So if anyone has a better idea then please do tell :D.