PDA

View Full Version : Panel adding extra white space when revisiting the page



mprinc1
11 Mar 2011, 2:35 PM
My page initially loads correctly, but when I go to another tab in firefox or ie, then come back to my extjs page, sometimes, it adds extra white space below my north region. I am just learning extjs. Please help!

file:///C:/DOCUME%7E1/mprinc/LOCALS%7E1/Temp/moz-screenshot.png
<html>
<head>
<title>GCDI Web Portal</title>
<!-- css for ext js -->
<link rel="stylesheet" type="text/css" href="/SourceNew/jscripts/ext/resources/css/ext-all.css" />
<!-- files for EXTJS -->
<script type="text/javascript" src="/SourceNew/jscripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/SourceNew/jscripts/ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="/SourceNew/jscripts/ext/menus.css" />

<!-- this is the overall css file for the site -->
<link rel="stylesheet" type="text/css" href="/SourceNew/DCO_extjs.css" />

<script language="JavaScript" type="text/javascript" src="/SourceNew/template/css/css.js"></script>
<script language="JavaScript" type="text/javascript" src="/SourceNew/template/javascripts.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

//Initializes tooltips
Ext.QuickTips.init();

var viewport = new Ext.Viewport({
layout: 'border',
items: [
// create instance immediately
new Ext.Panel({
border: false,
layout:'anchor',
region:'north',
height:27,
autoEl: {
tag: 'div',
html:'<div class="siteHeader">Delivery Center Web Portal</div>'
},
items: [
new Ext.Toolbar({
items:[
//this is the main menu toolbar
<cfinclude template="/SourceNew/extjs_menu.cfm">
]
})
]

}), {
// lazily created panel (xtype:'panel' is default)
region: 'south',
contentEl: 'south',
height: 40,
margins: '0 0 0 0'
}, {
region: 'west',
contentEl: 'west',
width: 150,
margins: '0 0 0 0'
},

new Ext.Panel({
region: 'center', // a center region is ALWAYS required for border layout
items: [{
contentEl: 'center1',
border: false,
autoScroll: true
}]
})

]
});
});
</script>


</head>
<body>

<!-- use class="x-hide-display" to prevent a brief flicker of the content -->
<div id="west" class="x-hide-display">
<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>
<td align="left" valign="top" class="sidebar-background">
<iframe name="Sidebar" src="/SourceNew/template/sidebar.htm" width="150" height="600" frameborder="0"
marginheight="0" marginwidth="0" scrolling="no" class="sidebar-frame">
</iframe>
</td>
</tr></table>
</div>
<div id="center1" class="x-hide-display">
<cfoutput>
<!--- This is where the body of the page should go--->
<br /><br />
<table><tr><td>&nbsp;&nbsp;&nbsp;</td>
<td><span class="Black14">Welcome to the GCS web portal. This site provides support services, implementation services, documentation, reports and monitoring for processing provided through GCS. It has recently been updated to provide better service for our customers and easier navigation of all areas. We hope you appreciate the new format and it makes your job easier. If you have suggestions or comments, please utilize the Support Services /Portal Request ticket process.
<br /> <br />
For questions or help please email to the <a href="mailto:#DCODistList#">#USNAME# Support Team</a> or click the <a href="#urlroot#/Documents/Universal Services Group Redesign Help.doc">Site Help Guide</a>.<br /><br />
For user access changes send an email to the <a href="mailto:#DCODistList#">#USNAME# Support Team</a>.</span></td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;</td>
<td><br /><br /><img src="Images/acxiom_wtagline.jpg" />
</td></tr>
</table>

</cfoutput> </div>

<!-- this is the footer section-->
<div id="south" class="x-hide-display">
<table cellpadding="6" cellspacing="0" border="0" width="100%"><tr><td align="left" valign="top">
<span class ="footer">&copy;Copyright 2008
<a href="http://www.acxiom.com" target="_top">Acxiom Corporation</a>All Rights Reserved<br>
For more information feel free to <a href="mailto:[email protected]">Contact Us</a></span><br>
</td><td align="right" valign="top">
</td></tr></table>
</div>
<!-- end footer section-->

</body>
</html>

mprinc1
14 Mar 2011, 7:41 AM
Does anyone have any ideas what the problem could be? I've researched everything I know to look for. It doesn't make any sense to me why my page loads correctly initially, but then moves around if I leave, then come back to the page. Any ideas?

mprinc1
14 Mar 2011, 11:06 AM
If I resize the page, it's also adding the whitespace.

bryall
14 Mar 2011, 12:31 PM
Can you provide a working page with this error?

mprinc1
14 Mar 2011, 12:42 PM
The code I posted is from a working page. It has some Coldfusion in it which may keep it from working for you if you don't have that.

Here is the same page, but with all the Coldfusion removed. I also attached a screenshot of my page after the problem occurs.


<html>
<head>
<title>GCDI Web Portal</title>
<!-- this is the overall css file for the site -->
<link rel="stylesheet" type="text/css" href="/SourceNew/DCO_extjs.css" />
<!-- css for ext js -->
<link rel="stylesheet" type="text/css" href="/SourceNew/jscripts/ext/resources/css/ext-all.css" />
<!-- files for EXTJS -->
<script type="text/javascript" src="/SourceNew/jscripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/SourceNew/jscripts/ext/ext-all.js"></script>

<link rel="stylesheet" type="text/css" href="/SourceNew/jscripts/ext/menus.css" />

<!-- contains all the icons for the menu -->
<link rel="stylesheet" type="text/css" href="/SourceNew/Template/menu_icons.css" />

<!-- this is the overall css file for the site -->
<link rel="stylesheet" type="text/css" href="/SourceNew/DCO_extjs.css" />

<script language="JavaScript" type="text/javascript" src="/SourceNew/template/css/css.js"></script>
<script language="JavaScript" type="text/javascript" src="/SourceNew/template/javascripts.js"></script>

<!--- This is where any additional javascript files can be included--->


<script type="text/javascript">
Ext.onReady(function(){

// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

//Initializes tooltips
Ext.QuickTips.init();

//This section starts the overall layout

<!--- This region is where any Ext JS code should go--->

var viewport = new Ext.Viewport({
layout: 'border',
items: [
// create instance immediately
new Ext.Panel({
border: false,
layout:'anchor',
region:'north',
height:27,
autoEl: {
tag: 'div',
html:'<div class="siteHeader">Delivery Center Web Portal</div>'
},
items: [
new Ext.Toolbar({
items:[
//this is the main menu toolbar
]
})
]
}), {
// lazily created panel (xtype:'panel' is default)
region: 'south',
contentEl: 'south',
height: 40,
margins: '0 0 0 0'
}, {
region: 'west',
contentEl: 'west',
width: 150,
margins: '0 0 0 0'
},

new Ext.Panel({
region: 'center', // a center region is ALWAYS required for border layout
items: [{
contentEl: 'center1',
border: false,
autoScroll: true
}]
})

]
});
});
</script>


</head>
<body>

<!-- use class="x-hide-display" to prevent a brief flicker of the content -->
<div id="west" class="x-hide-display">
<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>
<td align="left" valign="top" class="sidebar-background">
<iframe name="Sidebar" src="/SourceNew/template/sidebar.htm" width="150" height="600" frameborder="0"
marginheight="0" marginwidth="0" scrolling="no" class="sidebar-frame">
</iframe>
</td>
</tr></table>
</div>
<div id="center1" class="x-hide-display">
<!--- This is where the body of the page should go--->
<br /><br />
<table><tr><td>&nbsp;&nbsp;&nbsp;</td>
<td><span class="Black14">Welcome to the GCS web portal. This site provides support services, implementation services, documentation, reports and monitoring for processing provided through GCS. It has recently been updated to provide better service for our customers and easier navigation of all areas. We hope you appreciate the new format and it makes your job easier. If you have suggestions or comments, please utilize the Support Services /Portal Request ticket process.
<br /> <br /></span></td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;</td>
<td><br /><br /><img src="Images/acxiom_wtagline.jpg" />
</td></tr>
</table>

</div>

<!-- this is the footer section-->
<div id="south" class="x-hide-display">
<table cellpadding="6" cellspacing="0" border="0" width="100%"><tr><td align="left" valign="top">
<span class ="footer">&copy;Copyright 2008
<a href="http://www.acxiom.com" target="_top">Acxiom Corporation</a>All Rights Reserved<br>
For more information feel free to <a href="mailto:[email protected]">Contact Us</a></span><br>
</td><td align="right" valign="top">
</td></tr></table>
</div>
<!-- end footer section-->

</body>
</html>