iconCls + showBy makes overlay appear shifted

**jep** · 3 Mar 2012 1:48 PM

REQUIRED INFORMATION

Ext version tested:

Sencha Touch 2.0 RC

Browser versions tested against:

Chrome 17 on XP
iPad (1) Safari 5.1 (7534.48.3)

DOCTYPE tested against:

<!DOCTYPE html>

Description:

When used with a button with an iconCls set, showBy() shows farther from the button than it should.

Steps to reproduce the problem:

Run test case

The result that was expected:

All three popups should be the same distance from the toolbar

The result that occurs instead:

Only the last popup is the right distance. The middle one is slightly further and the first one is much further.

Test Case:

Code:

Ext.require([
    'Ext.Button',
    'Ext.Panel',
    'Ext.Toolbar'
]);

Ext.setup({
    onReady: function () {
        var overlay;

        Ext.Viewport.add([
          {
            xtype:'panel',
            items:
              {
                xtype: 'toolbar',
                docked: 'top',
                items:[
                  {xtype:'spacer'},
                  {
                    iconCls:'user',
                    iconMask:true,
                    ui:'plain'
                  },
                  {xtype:'spacer'},
                  {
                    iconCls:'user',
                    iconMask:true
                  },
                  {xtype:'spacer'},
                  {
                    text: 'Show',
                    ui:'plain'
                  },
                  {xtype:'spacer'}
                ]
              }
          },

          {
            itemId:'overlay',
            xtype: 'panel',
            left: 0,
            top: 0,
            modal: false,
            hidden: true,
            hideOnMaskTap:true,
            height: 300,
            width: 200,
            html:'popup'
          },
          {
            itemId:'overlay2',
            xtype: 'panel',
            left: 0,
            top: 0,
            modal: false,
            hidden: true,
            hideOnMaskTap:true,
            height: 300,
            width: 200,
            html:'popup'
          },
          {
            itemId:'overlay3',
            xtype: 'panel',
            left: 0,
            top: 0,
            modal: false,
            hidden: true,
            hideOnMaskTap:true,
            height: 300,
            width: 200,
            html:'popup'
          }
        ]);

      Ext.Viewport.down('#overlay').showBy(Ext.ComponentQuery.query('.button')[0]);
      Ext.Viewport.down('#overlay2').showBy(Ext.ComponentQuery.query('.button')[1]);
      Ext.Viewport.down('#overlay3').showBy(Ext.ComponentQuery.query('.button')[2]);
    }
});

<!DOCTYPE html>

<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" href="../sencha-touch-2-rc/resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="../sencha-touch-2-rc/sencha-touch-debug.js"></script>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>

HELPFUL INFORMATION

Screenshot or Video:
bug_overlays.jpg

**mitchellsimoens** · 4 Mar 2012 6:56 AM

Thank you for the report and thank you for the great test case.

**rdougan** · 28 Mar 2012 3:35 PM

Good find. Fixed for the next release.

iconCls + showBy makes overlay appear shifted

Thread Tools

Search Thread

Display

iconCls + showBy makes overlay appear shifted

iconCls + showBy makes overlay appear shifted