Forum | Appery.io

Hi guys,

How do I align the content of a grid cell to the right?

I have a grid in the header with 1 row and 3 columns.
in the first column i have a button that, by default, is aligned to the left.
the middle column has a label with the text centred.
in the 3rd column I have a 1x1 grid with an image inside it. By default the grid is aligned to the left.

I want the grid in the 3rd column to align to the right so that it stays the same distance away from the right side on all sized devices.

Hi Joe,

Please use following CSS code in CSS asset:

pre

/* where "mobilegridcell_322" is your grid cell in which you want to align content. */
[name="mobilegridcell_322"] .cell-wrapper{
float: right;
}

/pre

Regards.

Hi Yurii,

Thank you, this worked perfectly.

A follow up question:
For a few headers instead of having a label in the middle cell, i have an image.
How do I center an image, float: center does not work, do you have a work around?

Thanks

Hello Joe,

Could you please try to add a weight to this rule? For example with code!important/code ?

I did, but it appears that float: center can't be done.

Figured it out...
pre
Appery('componentName').css('margin-left', 'auto');
Appery('componentName').css('margin-right', 'auto');
Appery('componentName').css('display', 'block');/pre

where 'componentName' is the name of the item you want centred

I have an image in a 1x1 grid cell which I want centred hoizontally. I have tried using the above code on the image component and also the grid cell component but it still shows to the left of the gridcell. I am doing on pageload event.

Any ideas?

Hello Aeneas,

Could you please check that you don't have any other rules for this components that may have higher priority?

The image is in a grid cell with auto width and 30px height. The grid dimensions are auto height and width. The image itself is 236px width and 118px height.

On load I am running this with mobilegridcell_89 being the cell the image is in.

Appery('mobilegridcell_89').css('margin-left', 'auto');
Appery('mobilegridcell_89').css('margin-right', 'auto');
Appery('mobilegridcell_89').css('display', 'block');

Its not centering?

Try this

preAppery('mobileimage_x').css('margin-left', 'auto');
Appery('mobileimage_x').css('margin-right', 'auto');/pre

mobileimage_x - image component name