Use of stylesheet classes inside dash app

Dash Python
1

Hello.

I have a strange problem with css in my dash apps.
I use many tables in my app and and I apply rounded corners ( border-radius) to them.
There’s one table which stubbornly does not apply the border radius on all edges, only on the left side.
Now, all the working tables’ css is defined inside the app. In order to get the rounded edges applied to the problem kid, i found out that doing this in addition in the stylesheet.css does the job:

  .cdr .dash-table-container .dash-spreadsheet-container {
    display: table-cell!important;
    margin-top: 30px;
    margin-left: 30px;
    margin-bottom: 30px;

}

The problem ist that I cannot use external stylesheet for some reasons.
Is it possible to do the same settings inside the app? Is there a way to address the .dash-spreadsheet-container?

When I do apply a style class to the div inside the app:

style_xyz = {
        
         'borderRadius':'10px 10px',
       'display': 'table-cell!important',
        'overflow': 'hidden',
       'marginBottom': '30px',
       'marginTop': '30px',
       'marginLeft': '30px',

It doesn’t work.

I’m going nuts over this problem. Please let me know if you have any ideas!! :slight_smile:

2

Hello, it depends on which component you are using for creating tables in your dash apps. But for adding normal text style class here is the example I used in my app:

html.Div( [
html.Div([
html.H4( “Some text here”,
style={“margin-bottom”: “0px”, “color”: “white”}, ),
html.H6( “extra text here”,
style={“margin-top”: “0px”, “color”: “white”}, ),] )], )

I hope this helps!

3

Hi @tannin.rusk

try using the style_table prop of the DataTable, for example,

dash_table.DataTable(
    df.to_dict("records"),
    [{"name": i, "id": i} for i in df.columns],    
    style_table=style_xyz
 )

If that doesn’t work, can you make a minimal example with just the problem child?