adam griffin
Posts: 0
Joined: Tue May 21, 2013 8:44 pm

How do I keep the images and labels the same size through out different screen sizes?

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? Image Image

adam griffin
Posts: 0
Joined: Tue May 21, 2013 8:44 pm

How do I keep the images and labels the same size through out different screen sizes?

I'm sorry i said sizes I meant spacing.

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

How do I keep the images and labels the same size through out different screen sizes?

Hello! Try to set center alignment for grid cell.

adam griffin
Posts: 0
Joined: Tue May 21, 2013 8:44 pm

How do I keep the images and labels the same size through out different screen sizes?

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?

Igor
Posts: 0
Joined: Tue Apr 02, 2013 12:05 pm

How do I keep the images and labels the same size through out different screen sizes?

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

adam griffin
Posts: 0
Joined: Tue May 21, 2013 8:44 pm

How do I keep the images and labels the same size through out different screen sizes?

Im sorry, but Im not familiar with CSS.

maxkatz
Posts: 0
Joined: Fri Aug 13, 2010 3:24 pm

How do I keep the images and labels the same size through out different screen sizes?

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

Ram
Posts: 0
Joined: Fri Aug 02, 2013 12:15 pm

How do I keep the images and labels the same size through out different screen sizes?

@Adam

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

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:
Image

now, after running the code:
Image

different screen size before running the code:
Image

different screen size after running the code:
Image

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

adam griffin
Posts: 0
Joined: Tue May 21, 2013 8:44 pm

How do I keep the images and labels the same size through out different screen sizes?

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

adam griffin
Posts: 0
Joined: Tue May 21, 2013 8:44 pm

How do I keep the images and labels the same size through out different screen sizes?

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

Return to “Issues”