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

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

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

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

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

customaware

add this to the greenbutton class....

margin-left: 10px;