Align image center

Question

We need to align an image to the center of the sail form, we tried adding the image to a section with one column but the image appears at the left of the screen.

Thank you for your time.

Add an example image

Bye ;-)

TJ · Accepted Answer

This is going to be tricky as Appian does not support alignment in components other than grids. You can implement following methods 1. Create Image of 1000px width- If your image does not require link, you can create the image in white background and use 1000px width. This will (almost) align your image to center of Appian page (please use little less for dashboards owing to space used by left panel) 2. If your image needs to be clickable- sandwich your image between two while background blank images of approx 400px. This will enable your image in middle. Please test this approach on mobile, if you expect your users to be mobile based. Hope this answers your query..

chetany · Answer

As mentioned by Tajinder, there is no direct way. However, we can exploit the editable grid or the paging grid to align the image to center. The idea is to give the columns weight with the center one having higher weight than the other two columns. and use alignments.
Here's a sample code, (Note: replace the number 3886 with docId of an image):
a!gridLayout(
labelPosition: "ABOVE",
headerCells: {
a!gridLayoutHeaderCell(align: "RIGHT"), a!gridLayoutHeaderCell(align: "CENTER"),a!gridLayoutHeaderCell(align: "LEFT")
},
columnConfigs: {
a!gridLayoutColumnConfig( weight: "3"),
a!gridLayoutColumnConfig(weight: "4"),
a!gridLayoutColumnConfig(weight: "3")
},
rows: {
a!gridRowLayout(
contents: {
a!textField(readOnly: true,disable: true),
a!imageField(
images: { a!documentImage(document: 3886)}
),
a!textField(readOnly: true,disable: true)
}
)
},
selectionSaveInto: {},
validations: {}
)
This does align the image to the center of the page. And if you are using Sites, it will be exactly at the center. It also works on mobile display. I tried different resolutions in chrome browser, and the image always remained in the center. I am attaching a screenshot of what the result looks like.
Note: instead of editable grid, you could also use paging grid and employ a similar trick. But, paging grid gives a slightly grey background to the columns. Hence editable grid would be better.(end-user wont be able to make out that its a grid since we are not showing any text) This is of-course a hack, but could be used.