View Full Version : Problems Aligning Images

14 Mar 2014, 8:19 AM
I'm trying to align images within a container but the positions aren't getting set until after I resize my browser window. I've tried two different methods of alignment, both giving the same result. I have a container with a fixed size that has nothing but an Image inside. Let me explain my two attempts:

First, I used the html property of the container to apply and img tag. Then, in the 'afterlayout' EventBinding, I used the alignTo method:
Ext.getCmp('myImage').alignTo('imageContainer'), 'c-c');.

Second, I tried the 'image' xtype as a child of the container. The alignment was done by setting the layout of the container to vbox with Alignment:center and Pack:center.

Also, I imagine the first method is preferred as it seems more light-weight but please give any input about this as well.


17 Mar 2014, 10:33 PM
The layout route is a little heavier, but it's what I'd do I think. It will persist the centering when the container's dimensions change. *When using the image component be sure to set the height/width in the config.


18 Mar 2014, 11:13 AM
Thanks slemmon, setting the dimensions does fix the issue but I failed to mention that the images will be loaded dynamically, possibly with different sizes. I guess it's possible that when the image src is set at runtime, the layout sequence will behave appropriately. Do you know if this is true? Also, I'm seeing this issue in Chrome, and not IE8. Strange that IE is the one without problems for once :).

So, I did get another solution working using this CSS trick : https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div. Since extjs has built in layout techniques, I'd like to use those instead of CSS tricks but thought I'd note this as well.

18 Mar 2014, 11:28 AM
In the layout run the dimensions will need to be known for the layout to center the image component. So, what you can do is set a load listener on the image element in the image component and on load do an updateLayout() on the parent container.