Results 1 to 4 of 4

Thread: [FIXED-93][3.0.0] Form button align right failure in IE8

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2007
    Virginia, USA

    Exclamation [FIXED-93][3.0.0] Form button align right failure in IE8

    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" /> <title>Test</title> <link rel='stylesheet' type='text/css' href='ext/resources/css/ext-all.css?$time' /> <!--style type="text/css"> table.x-toolbar-ct { width: auto; } </style--> <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'> Ext.onReady(function(){ win = new Ext.Window({ width: 260, height: 140, modal: true, title: 'Login', closable: false, constrain: true, items: [{ xtype: 'form', labelWidth: 75, labelAlign: 'right', bodyStyle: { 'background-color':'#DFE8F6', 'padding-top':'10px' }, border: false, baseParams: { module: 'login' }, items: [{ xtype: 'textfield', fieldLabel: 'user', name: 'user' }, { xtype: 'textfield', fieldLabel: 'password', name: 'pass', inputType: 'password' }], buttons: [{ text: 'Login' }] }] });; }); </script> </head> <body> <noscript>Javascript must be enabled!</noscript> </body> </html>

  2. #2
    Ext User
    Join Date
    Jul 2007


    Thanks for the report.

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

  3. #3
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Sydney, Australia


    Fixed in SVN.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  4. #4
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Boulder, CO Suburbia (Lafayette)


    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts