View Full Version : [FIXED-93][3.0.0] Form button align right failure in IE8

23 Jul 2009, 6:24 AM
In IE8 buttons do not align right. The reason for this is the setting of a x-toolbar-ct table width to 100%. This occurs twice in ext-all.css by the way. Removing this fixes the problem but I don't know what damage it does elsewhere.

.x-toolbar-ct {

Here is an example that demonstrates the break. The fix is the commented out style block:



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel='stylesheet' type='text/css' href='ext/resources/css/ext-all.css?$time' />
<!--style type="text/css">
table.x-toolbar-ct {
width: auto;
<script type="text/javascript" src="ext/adapter/ext/ext-base.js?$time"></script>
<script type="text/javascript" src="ext/ext-all-debug.js?$time"></script>
<script type='text/javascript'>
win = new Ext.Window({
width: 260,
height: 140,
modal: true,
title: 'Login',
closable: false,
constrain: true,
items: [{
xtype: 'form',
labelWidth: 75,
labelAlign: 'right',
bodyStyle: {
border: false,
baseParams: {
module: 'login'
items: [{
xtype: 'textfield',
fieldLabel: 'user',
name: 'user'
}, {
xtype: 'textfield',
fieldLabel: 'password',
name: 'pass',
inputType: 'password'
buttons: [{
text: 'Login'
<noscript>Javascript must be enabled!</noscript>

23 Jul 2009, 7:30 AM
Thanks for the report.

For completeness, I see the button left aligned in IE7 or IE8 regardless of document mode or compatibility view setting.

16 Aug 2009, 10:57 PM
Fixed in SVN.

11 Sep 2009, 1:40 PM
I'm seeing behavior similar to this in IE8, but slightly different. If I have a row of buttons (there are 6 to begin with in my window) and a couple of them are hidden... Particularly the one farthest to the right, the buttons do not stay aligned to the right. I can provide screenshots if you'd like, but imagine a row of 6 buttons, a couple are hidden (including the button to the far right), and the buttons are now not all the way to the right.

Sorry... Ignore that top part. Create a window with a few buttons that are shown. On the click event for one of the buttons, hide a couple of them... Particularly the one farthest to the right. The buttons will not be aligned right. It looks like an inline width is being set on the x-toolbar-layout-ct <div>

I just added:

table.x-toolbar-ct {
width: auto;
float: right;

to the style declaration. Fixes it in IE8 without harm to FF3, but I'm not sure on the ramifications of the other browsers or what happens when buttons are left aligned.