View Full Version : can't use iframe in tab panel created with ContentPanel()?

20 Nov 2006, 4:12 AM
I use YAHOO.ext.ContentPanel() to create tab panel. But one strange thing happen, image or button in iframe is not visible, but plain text can be see. I use yui-ext.0.33-beta4 and BorderLayout to create tab panel.

This happen with IE 6.0, but with FF, it's OK!

Any hints? Thanks!

The iframe html file is simple:
<img src="img/test.gif border=0>hello

'test.gif' image is not visible, 'hello' can be see.

20 Nov 2006, 7:03 AM
Erm.. missing close double-quote after .gif?

20 Nov 2006, 4:32 PM
The demo code is here:

<link rel="stylesheet" type="text/css" href="../yui/reset/reset-min.css">
<script type="text/javascript" src="../yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../yui/build/dom/dom.js"></script>
<script type="text/javascript" src="../yui/build/event/event.js"></script>
<script type="text/javascript" src="../yui/build/connection/connection.js"></script>
<script type="text/javascript" src="../yui/build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="../yui/build/animation/animation.js"></script>

<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" src="../yui-ext.0.33-rc1/yui-ext-debug.js"></script>
<script type="text/javascript" src="../yui-ext.0.33-rc1/examples/ie-bg.js"></script>

<link rel="stylesheet" type="text/css" href="../css/layout.css"/>
<link rel="stylesheet" type="text/css" href="../css/grid.css"/>
<link rel="stylesheet" type="text/css" href="../css/tabs.css"/>
<link rel="stylesheet" type="text/css" href="../css/resizable.css"/>
<script type="text/javascript">
Example = function(){
var navPanel;

return {
init : function(){
var layout = new YAHOO.ext.BorderLayout(document.body, {
west: {
initialSize: 200,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
center: {
autoScroll: false,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true

navPanel = new YAHOO.ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false});
layout.add('west', navPanel);
layout.add('center', new YAHOO.ext.ContentPanel('main', {title: 'Auto Tabs', closable: true}));
layout.add('center', new YAHOO.ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));

// restore any state information
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);

<div id ="container">
<div id="nav" class="ylayout-inactive-content">
<div id="main" class="ylayout-inactive-content">
<iframe id="fileIframe2" src="iframe_demo.html" frameborder="2" height=54 width=124></iframe>
<div id="autotabs" class="ylayout-inactive-content">



Of course, path to js, css and images may need modification if you want to show it on your system.

In FF, image shows as expected, but IE 6.0 not!

Any hints are appreciated.