Trouble with Align Icon in center of grid cell

[Jaymer]

having trouble trying to remember how to center this Icon in a Grid cell

Screen Shot 2018-11-20 at 6.01.51 PM.png (11.95 KiB) Viewed 7110 times

In the Attribute definition, there is an Icon Rule to determine 1 of 4 icons.

Screen Shot 2018-11-20 at 6.21.43 PM.png (18.11 KiB) Viewed 7107 times

Sample CSS for the icon color:
.greenbutton{
color: #00ad76 !important;
font-weight: bold !important;
}



Then, in the Styles definition, there is this:

Screen Shot 2018-11-20 at 6.03.13 PM.png (40.74 KiB) Viewed 7110 times

The Style setting seems to make no difference to the Icon. (ie. its not aligned right, its not 14pt, not white backgr)
Even setting "text-align: center" in the CSS didn't center the Icon in the column. Which makes sense, as the FA Icon is just text and the text area isn't the entire column width... the FA Icon is displayed using ::before.

V8.1 bld 2476

PS _ The forum software screwed me 1 times in the making of this post

[JonP]

I think what you want is to select the grid, click the Widget property, select the column you want to center, click Edit, select Column Header, and set the Alignment combo box to Center.

[Jaymer]

Jon, that ONLY sets the Column Header (like it says) to be centered. NOT the data under it.

The data should be set (or overridden) by this:

Screen Shot 2018-11-21 at 12.48.12 PM.png (17.11 KiB) Viewed 7081 times

but when setting the grid display to "Icon Only", the checkbox "Use style defined in the attr...." is dimmed.
Maybe thats a bug?

Weird thing is, I have an older-created Query (from a prev. build) in another BO that has a similar YesNo field, and I have a simple Icon rule and the Checkmark appears centered in its grid, even though I can find NO WHERE any setting to make it centered. The same "Icon Only" setting in the Grid fields. The same dimmed checkbox in the Edit dialog for the column.

Screen Shot 2018-11-21 at 1.23.13 PM.png (14.49 KiB) Viewed 7081 times

The centering can't come from the CSS of the ICON.
Aware has already output the CELL info and it says
element.style {
text-align: left;
white-space: nowrap;
}

So the ICON, regardless of it requesting CENTER, is going to be in the LEFT of the cell, which is whats happening.
On the GRID that DIsplays correctly, that cell says:
element.style {
text-align: center;
white-space: nowrap;
}

[customaware]

It is a long shot but have you tried adding...

text-align: center !important;

to the greenbutton class

[Jaymer]

Mark, this is what I was trying to say before.
The TD is planty wide (the column width), and THAT element is text-align: left;

Screen Shot 2018-11-22 at 10.49.19 PM.png (9.16 KiB) Viewed 7015 times

Adding CENTER to the Icon actually DOES center it - only in its tiny world of 1em/the width of the character.

Screen Shot 2018-11-22 at 10.49.11 PM.png (14.48 KiB) Viewed 7015 times

[customaware]

add this to the greenbutton class....

margin-left: 10px;