Vertically centering FontAwesome icons in a cell of a datatable

[awesomefeathers]

Hi all,

How do I vertically center FontAwesome icons in a cell of a datatable? My datatable is styled in a way where text will be centered vertically. However, FontAwesome icons are not following the styling rules. I’ve tried playing around with CSS (I’m not too knowledgeable on CSS) and I could not get it to work properly. A screenshot of the issue and the simplified code is below:

table = dash_table.DataTable(
    id='table1',
    style_header={
        'textAlign': 'left',
        'backgroundColor': 'rgb(235, 235, 235)',
        'color': 'black',
        'fontWeight': 'bold',
        'height': '45px',
        'whiteSpace': 'normal'
    },
    style_data={
        'textAlign': 'center',
        'whiteSpace': 'normal',
        'height': '55px',
        'lineHeight': '13px',
    },
    markdown_options={"html": True},
    sort_action='custom',
    sort_by=[{'column_id': 'Rank', 'direction':'asc'}],
    hidden_columns=['Division'],
    fixed_columns={'headers': True, 'data': 1},
    fixed_rows={'headers': True, 'data': 0},
    style_table={'minWidth': '100%', 'minHeight': '750px', 'height': '750px', 'maxHeight': '750px', 'overflowY': 'auto'},
    merge_duplicate_headers=True,
    cell_selectable=True,

Any help would be greatly appreciated!

[jinnyzor]

Hello @awesomefeathers,

When you add font awesome, it adds a :before psuedo class, that is why it is displaying above where it should be.

What you can try is:

.dash-table tr td {
     display: flex;
     justify-content: center;
     align-items: center;
}

This will apply to all that doesnt have styles applied directly to them.

[jinnyzor]

Actually, that was wrong, here is something different you can try:

.cell-markdown > p {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

Font awesome icons are housed inside of a paragraph. These are placed inside of a div with class cell-markdown.

---

Edit: another thing of note, the font-size property will need to be the same for both the text in the fields and the icons to make them line up exactly:

Font size of 15pt applied to the whole body.

app.py:

from dash import Dash, html, dash_table
import pandas as pd


FONT_AWESOME = "https://use.fontawesome.com/releases/v5.10.2/css/all.css"

clouds = '<i class="fa fa-cloud" style="color: grey;"></i>'
rain = '<i class="fa fa-cloud-rain"></i>'
sun = '<i class="fa fa-sun" style="color: gold;"></i>'

app = Dash(__name__, external_stylesheets=[FONT_AWESOME])

df = pd.DataFrame(
    dict(
        [
            ("temperature", [13, 43, 50]),
            ("city", ["NYC", "Paris", "Seattle"]),
            ("icon", [sun, clouds, rain]),
        ]
    )
)

app.layout = html.Div(
    [
        dash_table.DataTable(
            css=[dict(selector="p", rule="margin: 0px;")],
            data=df.to_dict("records"),
            columns=[
                {"id": "city", "name": "City"},
                {"id": "temperature", "name": "Temperature"},
                {"id": "icon", "name": "", "presentation": "markdown"},
            ],
            markdown_options={"html": True},
            style_table={"width": 200},
            style_data={'height': 50}
        )
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

[awesomefeathers]

Thank you @jinnyzor, the css code you provided solves my problem!

As an aside, something I noticed is that after including the css code is that the cells with the FontAwesome icons can be “scrolled”, meaning that when I am scrolling down the table with a touchpad I can scroll each individual cell that has an icon and the scroll bar appears. This functionality does not exist in other cells without FontAwesome icons. Is there a way to remove this functionality of “scrolling” inside cells with icons? A snapshot of the issue is attached:

Thanks,
Jay

[jinnyzor]

Sure,

I think it is just:

overflowY: hidden

Or

overflow-y: hidden

[awesomefeathers]

Cheers @jinnyzor, I added that into the style_data dict and it works perfectly.

Thanks again for your help, being a CSS noob this was really helpful.