Question

我正在登录页面上工作并拥有一个容纳左右容器的容器。左侧只有一个标签，右侧的标签在vbox中有登录表单和徽标。

问题在于，当页面加载时，图像从其容器的中心向右偏移，尽管包和对齐设置为“中心”。如果我调整窗口的大小，即使是一个像素，位置也会自行纠正，所以我试图找出如何防止这种情况。

我在容器的类中添加了一个转换，它会在加载时修复它，但是一旦我调整窗口大小，它就会在相反的方向上偏移图像。我也试过绝对定位元素，顶部和左边设置为0，它根本没有改变位置。

我稍微介绍了一下代码并进入了某种类型的动画处理程序，这实际上导致了图像的重新定位，遗憾的是我没有更详细的信息来说明它是在哪里或者它正在经历什么过程。

组件周围的CSS是非常基本的，并且也没有很多配置，所以如果有人对于为什么会发生这种情况有任何想法我会很感激。

{
  xtype: 'container',
  reference: 'formPanel',
  height: '100%',
  width: '42%',
  layout: {
    type: 'vbox',
    align: 'center',
    pack: 'center'
  },

  items: [
    {
      xtype: 'image',
      cls: 'companyLogo',
      bind: {
        src: '{logo}'
      }
    },
    {
      xtype: 'login-form' //contains the uses of the login classes
    }
  ]
}

.companyLogo{
  height: 100px;
  margin-bottom: 10px;
}
.loginButton{
  height: 50px;
}
.loginPanel{
  position: absolute;
  margin-bottom: 270px;
}

Answer 1

您可以尝试调用resize事件来查看是否修复了它。

window.dispatchEvent(new Event('resize'));

Answer 2

在与Sencha交谈之后，我在CSS中为图像添加了一个明确的宽度值，并且能够正确定位自己。它不能解决当图像必须更改为其他内容时的问题，但经验教训是图像必须为其容器提供高度和宽度值。

图像加载位置不正确，但在调整窗口大小时自行更正

2 个答案: