IE Tab Panel display mangled [Archive]

carmelchas

5 Sep 2011, 9:22 AM

I have an application with a tabpanels inside a window inside a viewport. Chrome and Firefox look fine, but Internet Explorer 8 is mangled. Below are some screen-shots from each browser. See how the tabs are hiding under the respective panel... how the buttons appear to have an extra container around them.

Pleas help. After the screenshots is the viewport source.

278632786427865

=============== Ext JS 4 SOURCE ====================================
Ext.Loader.setConfig({enabled: true});

Ext.require('Ext.tab.*');

Ext.onReady(function(){
Ext.QuickTips.init();
var qtip = Ext.QuickTips.getQuickTip();
qtip.interceptTitles = true;

Playboy.widgets.InitializeVtypes();
var viewport, girlTab, tagTab, CheckSessionStatus, loginWindow;
tagTab = Playboy.widgets.TagAdminWindow({
id: 'admin-tag-tab',
scope: adminwin
});
girlTab = Playboy.widgets.GirlAdminWindow({
id: 'admin-girl-tab',
scope: adminwin
});

loginWindow = new Ext.Window({
plain: true,
closeAction: 'hide',
modal: true,
title: "Login timed out, please log in.",
width: 400,
autoHeight: true,
items: [
{
xtype: 'form',
id: 'login-form',
items: [
{
xtype: 'textfield',
fieldLabel: 'Username',
name: 'data[User][username]'
},
{
xtype: 'textfield',
inputType: 'password',
fieldLabel: 'Password',
name: 'data[User][password]'
}]
}],
buttons: [
{
text: 'Submit',
handler: function() {
Ext.getCmp('login-form').getForm().submit({
url: '/users/login',
params: {'ajax': true},
success: function(form, action) {
CheckSessionStatus();
},
failure: function(form, action) {
CheckSessionStatus();
},
waitMsg:'logging in...'
});
}
}]
});
CheckSessionStatus = function() {
if (!adminwin || !adminwin.isVisible()) {
alert('No Window');
return false;
}
Ext.Ajax.request({
url : '/users/sessioncheck/',
params: {'ajax': true},
method: 'GET',
waitMessage: 'Checking Session Status',
success: function (result, request) {
res = Ext.decode(result.responseText);
if (res.success) {
/*Ext.Function.createDelayed( CheckSessionStatus, 60000, adminwin)();
if (loginWindow.isVisible()) {
loginWindow.hide();
}*/
} else {
javascript:window.location.reload(false)
/*if (!loginWindow.isVisible()) {
loginWindow.show();
} else {
loginWindow.setTitle('Invalid Username or Password');
}*/
}
},
failure: function (result, request) {
javascript:window.location.reload(false)
//loginWindow.show();
}
});
};

// basic tabs 1, built from existing content
var tabs = Ext.createWidget('tabpanel', {
width: '100%',
height: 1000,
activeTab: 0,
layoutOnTabChange: true,
defaults :{
bodyPadding: 10
},
autoScroll: true,
autoHeight: true,
viewConfig: {
autoScroll: true,
autoHeight: true
},
items: [
girlTab,
tagTab
],
listeners: {
tabchange: function(tabPanel, newCard, oldCard, options) {
if (newCard == girlTab) {
girlTab.initWidget();
} else if (newCard == tagTab) {
tagTab.initWidget();
}
},
afterrender: function() {
girlTab.initWidget();
},
listeners: {
maximize: function(){this.doLayout();},
restore: function(){this.doLayout();}
}
}
});

viewport = new Ext.Viewport({
layout: 'border',
renderTo: 'admin_body',
autoScroll: true,
autoHeight: true,
maintainFlex: true,
items: [{
region: 'center'
}],
listeners: {
render: function() {
adminwin = new Ext.Window({
previousHeight: null,
title: 'Girl\'s Directory Administration - Welcome, ' + username_display,
closable: false,
collapsible: true,
animCollapse: true,
minimizable: (user_group == 1) ? true : false,
closeAction: 'hide',
width: '100%',
maxHeight: 1000,
layout: 'fit',
flex: 200.0,
X: 0,
Y: 0,
items:[ tabs ],
listeners: {
show: function() {
this.maximize();
return true;
},
minimize: function() {
this.hide();
return true;
}
}
});
Ext.Function.createDelayed( CheckSessionStatus, 60000, adminwin)();
adminwin.show();
}
}
});
viewport.doConstrain();
});

================ PHP Source =========================
<body>
<h2>Welcome, <?php echo $namestr; ?>!</h2>
<div id="container">
<div id="header">
<ul><li><a onclick="javascript:adminwin.show();">Show Admin Window</a></li></ul>
</div>

<div id="content">
<?php echo $this->Session->flash(); ?>
<?php echo $this->Session->flash('auth'); ?>
<div id="admin_items">
<ul>

<?php if (isset($sess_user) and $sess_user['group_id'] == 1) { ?>

<li><?php echo $this->Html->link(__('List Bucket Types', true), array('controller' => 'bucket_types', 'action' => 'index')); ?> </li>
<li><?php echo $this->Html->link(__('List Image Types', true), array('controller' => 'image_types', 'action' => 'index')); ?> </li>
<li><?php echo $this->Html->link(__('List Groups', true), array('controller' => 'groups', 'action' => 'index')); ?> </li>
<li><?php echo $this->Html->link(__('List Users', true), array('controller' => 'users', 'action' => 'index')); ?> </li>
<?php } ?>

<li><?php echo $this->Html->link(__('Logout', true), array('controller' => 'users', 'action' => 'logout')); ?> </li>

<?php } else { ?>

<li><?php echo $this->Html->link(__('Login', true), array('controller' => 'users', 'action' => 'login')); ?> </li>

<?php } ?>
</ul>
</div>

<div id="admin_body"></div>

<div id="footer">
</div>
</div>

</div>
</body

carmelchas

5 Sep 2011, 9:33 AM

I have identified the source of the problem, but not the cause.

Removing the other divs in the PHP source eliminates the display problem, but I need to have the other content in the page. Any suggestions?

carmelchas

5 Sep 2011, 10:57 AM

Nevermind. It turns out the CakePHP generic css was causing the problem.

lemon

21 Dec 2011, 1:15 AM

How can you solve it? I am facing the same problem but I am using javascript & jsp but not php.

cbeasl2

23 Dec 2011, 11:08 AM

My problem was CSS related. I was using the CakePHP default.css which was causing my problem. I eliminated the related style.