PDA

View Full Version : iframe sizing problem in tabpanel



netnutmike
6 May 2009, 5:58 AM
Hi all,

First, thanks to everyone on the tips on not using renderto. That solved just about every grid problem I was having with grids in the tabpanels. You guys rock.

I am having 2 problems and I will submit as different posts since they are not related. My first is the sizing of an iframe inside of a tabpanel. I have another site that I want to include inside of one of my tabs. Since it is not on the same machine I cannot just use the load.

The problem I am having is the iframe is very small even if I set the size. I tried putting width=100% and height=100% in the iframe. That does make it the whole page width but not the height.

Any tips would be greatly appreciated. The code is below:


proptab = new Ext.TabPanel({
region:'center',
layoutOnTabChange: true,
activeTab:0,
items:[{
contentEl:'summary',
title: 'Summary Info',
style:'margin-left:20px',
autoScroll:true
},{
contentEl:'propertyeditdiv',
title: 'Property Info',
autoScroll:true
},{
contentEl:'propdrawing',
title: 'Property Drawing',
autoScroll:true
},{
title: 'Pictures',
autoScroll:true,
items: [{
xtype: 'toolbar',
items: [{
xtype: 'button',
id: 'addpicture',
text: 'Upload New Picture'
}, {
xtype: 'button',
id: 'editpictures',
text: 'Edit Pictures'
}]
}, {
autoLoad: 'pictureviewer.php?marsha=<? echo strtoupper($property["Marsha"]) ?>'
}]
},{
contentEl:'weather',
title: 'Weather',
autoScroll:true
},{
contentEl:'map',
title: 'Map',
autoScroll:true
},{
contentEl:'propdevices',
title: 'Computers',
// width: 400,
height: 900,
// autoheight: true,
// autoScroll:true
},{
contentEl:'propbigfix',
title: 'BigFix Fixlets',
width: 400,
height: 700,
autoScroll:true
}]
})

<div id="propdevices" class="x-hidden">
<iframe src="https://hdqncmaark1b.marriott.com/search.php?searchCriteria=siteCode&searchValue=<? echo strtoupper($property["Marsha"]) ?>"></iframe>

</div>
<div id="propbigfix" class="x-hidden">
<iframe src="https://hdqncmaark1b.marriott.com/reports/bigfix.php?siteCode=<? echo strtoupper($property["Marsha"]) ?>" height="100%" width="100%"></iframe>

</div>

Condor
6 May 2009, 6:02 AM
Instead of:

{
contentEl: 'propdevices',
title: 'Computers'
}
try:

{
xtype: 'box',
el: 'propdevices',
title: 'Computers'
}

netnutmike
6 May 2009, 6:15 AM
I do not get anything in the tabpanel but a blank tab now. Do I have to make any changes to the iframe for this to work?

netnutmike
6 May 2009, 6:19 AM
sorry, my bad. I did not have autoShow true and had the x-hidden style. That seems to work now. Just for my own reference, what did this do different?

Condor
6 May 2009, 6:19 AM
Oh, yes. That should have been:

{
xtype: 'box',
el: 'propdevices',
title: 'Computers',
autoShow: true
}
with:

<iframe id="propdevices" class="x-hidden" src="https://hdqncmaark1b.marriott.com/search.php?searchCriteria=siteCode&searchValue=<? echo strtoupper($property["Marsha"]) ?>"></iframe>
(not surrounding div)