Inline CSS ignored on my VPS?

Dash Python
1

Hello,

In my code I have the following RangeSlider:

                    html.Div(
                        [

                            dcc.RangeSlider(
                                id='GlobalRangeSlider',
                                min=0,
                                max=len(available_dates_rangeslider)-1,
                                marks={i : {'label' : available_dates_rangeslider[i], 'style':{'transform':'rotate(-45deg)', **'font-size':'9px'**}} for i in range(0, len(available_dates_barchart))},
                                value=[30, len(available_dates_barchart)-1],
                                allowCross=False
                            )
                        ],
                        className='twelve columns',
                        style={'height':'40px','text-align': 'center'}

When I run this code on my localhost, the font-size of my RangeSliders’ marks is 9px; if I inspect the page, I get this:9px

So far, so good.

But if I upload my dash app on my VPS, the font size is not anymore 9px. It’s like the inline CSS is ignored. If I inspect the page, the font size is not specified:
no9px

Why?

2

What version of Dash is your local host on vs your VPS?

My understanding is Dash recently upgraded to React 16, and this no longer allows 'attribute-word' and instead you must use 'attributeWord'. So try changing your style attribute to: 'fontSize'.

3

Localhost:
dash==0.39.0
dash-core-components==0.44.0
dash-daq==0.1.4
dash-html-components==0.14.0
dash-renderer==0.20.0
dash-table==3.6.0

VPS:
dash==0.41.0
dash-core-components==0.48.0
dash-daq==0.1.5
dash-html-components==0.16.0
dash-renderer==0.24.0
dash-table==3.7.0

I tried what you suggested but unfortunately it didnt change anything :confused:

4

Looks to be the case, React 16 was added in Dash Renderer 0.22:

Which was added in Dash 0.41:
https://github.com/plotly/dash/blob/master/dash/CHANGELOG.md#0410---2019-04-10

5

I suggest you try creating a small minimal example that someone else can run then to check it out. This is the only issue I see and the symptoms (missing style attributes) and cause (different Dash version) exactly match.

6

If I write this:

Test_dates_rangeslider=[‘Jan’,‘Feb’,‘Mar’,‘Apr’,‘May’,‘Jun’,‘July’]

app.layout = html.Div([
dcc.Location(id=‘url’, refresh=False),
html.Div(id=‘page-content’)

        html.Div(
            [

                dcc.RangeSlider(
                    id='TESTRangeSlider',
                    min=0,
                    max=len(Test_dates_rangeslider)-1,
                    marks={i : {'label' : Test_dates_rangeslider[i], 'style':{'transform':'rotate(-45deg)', 'fontSize':'9px'}} for i in range(0, len(Test_dates_rangeslider))},
                    value=[30, len(Test_dates_rangeslider)-1],
                    allowCross=False
                )
            ],
            className='twelve columns',
            style={'height':'40px','text-align': 'center'}
        ),

        html.Div(
            [

                dcc.RangeSlider(
                    id='TESTRangeSlider2',
                    min=0,
                    max=len(Test_dates_rangeslider)-1,
                    marks={i : {'label' : Test_dates_rangeslider[i], 'style':{'transform':'rotate(-45deg)', 'font-size':'9px'}} for i in range(0, len(Test_dates_rangeslider))},
                    value=[30, len(Test_dates_rangeslider)-1],
                    allowCross=False
                )
            ],
            className='twelve columns',
            style={'height':'40px','text-align': 'center'}
        ),

])

And run it on the VPS, here:
http://ev-trends.com/other-statistics

Both RangeSlider have the correct 9px font-size or fontSize;

But on the mainpage,
http://ev-trends.com/overview_EU

everthing is a bit upside down; css seems ignored. I assume the problem must come from something else then. (More likely, my code must be the cause of the troubles, and not the server)

7

Sorry not sure what the issue is actually. I took your code and made a fully working demo and on my version of Dash they both work…

dash 0.43.0
dash-core-components 0.48.0
dash-html-components 0.16.0
dash-renderer 0.24.0
dash-table 3.7.0

The Code:

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash(__name__)


Test_dates_rangeslider = ['Jan','Feb','Mar','Apr','May','Jun','July']

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content'),
    html.Div(
        [
            dcc.RangeSlider(
                id='TESTRangeSlider',
                min=0,
                max=len(Test_dates_rangeslider)-1,
                marks={i: {'label': test_date, 'style': {'transform': 'rotate(-45deg)', 'fontSize': '30px'}}
                       for i, test_date in enumerate(Test_dates_rangeslider)},
                value=[30, len(Test_dates_rangeslider)-1],
                allowCross=False
            )
        ],
        className='twelve columns',
        style={'height': '40px', 'textAlign': 'center', 'maxWidth': '400px'}
    ),

    html.Div(
        [
            dcc.RangeSlider(
                id='TESTRangeSlider2',
                min=0,
                max=len(Test_dates_rangeslider)-1,
                marks={i: {'label': test_date, 'style': {'transform': 'rotate(-45deg)', 'font-size': '30px'}}
                       for i, test_date in enumerate(Test_dates_rangeslider)},
                value=[30, len(Test_dates_rangeslider)-1],
                allowCross=False
            )
        ],
        className='twelve columns',
        style={'height': '40px', 'text-align': 'center', 'max-width': '400px'}
        )
])

if __name__ == '__main__':
    app.run_server()
8

No problem, thank you for the help!

Will keep investigating and edit my post once I -hopefully- find the solution

9

I found the cause of the problem.

I had this layout:

    html.Div([
        Header(),
    html.Div(id='DIVTEST'), 
	html.Div([ 
		html.Div([
			.....

The div “DIVTEST” was missing the []…so dumb.

I deleted the line and now the CSS is not ignored anymore. Problem fixed.