Forum | Appery.io

I am using a grid to keep images and labels align. When I change screen sizes the grid remains the same but the alignment of the images with the labels begin to part further apart. How can I keep the spacing between the two the same no matter what the screen size is?

I'm sorry i said sizes I meant spacing.

Hello! Try to set center alignment for grid cell.

I don't see that option when I click on the grid cell. I have the labels within each cell centered, I don't see anything saying center alignment in the grid cells. Is there any other way?

Hello,
You can use CSS to set alignment. Please take a look at this doc http://docs.appery.io/documentation/w...

Im sorry, but Im not familiar with CSS.

We can give you guidance, tips, etc, but CSS knowledge is required for customizing your app. http://docs.appery.io/getting-started...

@Adam

here's my solution to that problem, this is the page in design mode:

this is the code attached to the button (you should use it in page load event):
precode
var imgH = Appery('mobileimage_9').height();
var imgW = Appery('mobileimage_9').width();
//alert(h);
var cellElement = Appery('mobileimage_9').closest('td');
var clH = cellElement.height();
var clW = cellElement.width();

var imgLeft = (clW - imgW) / 2;
var imgTop = (clH - imgH) / 2;
Appery('mobileimage_9').css('position', 'relative').css('top',imgTop).css('left',imgLeft);
Appery('mobileimage_10').css('position', 'relative').css('top',imgTop).css('left',imgLeft);
/code/pre

once run before running the code:

now, after running the code:

different screen size before running the code:

different screen size after running the code:

i'm sure there are other ways to get this done but this does the work for me.
Best,
R.

Thats exactly what I needed! I am going to see will it work for me.

what is the "td" in - var cellElement = Appery('mobileimage_9').closest('td');