Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

Update from 0.37.7 to 0.38.0 break local css for Dash components #380

Closed
EBoisseauSierra opened this issue Nov 13, 2018 · 2 comments · Fixed by #382
Closed

Update from 0.37.7 to 0.38.0 break local css for Dash components #380

EBoisseauSierra opened this issue Nov 13, 2018 · 2 comments · Fixed by #382
Assignees
Labels
dash-type-bug Something isn't working as intended

Comments

@EBoisseauSierra
Copy link

EBoisseauSierra commented Nov 13, 2018

TL;DR: 0.37.7 -> 0.38.0 breaks dcc css styling.

I have styled some dcc in a local .css file — e.g.:

.Select-control {
  width: 100%;
  font-family: sans-serif;
  height: 50px;
  border-radius: 0;
  font-size: 100%;
}

.Select-placeholder,
.Select-value-label {
  line-height: 50px;
}

.DateRangePicker,
.DateRangePickerInput {
  display: block;
}

.DateInput {
  min-width: 110px;
  width: 45%;
  text-align: center;
}

.DateInput__display-text {
  font-family: sans-serif;
  font-weight: normal;
}

.DateRangePickerInput__arrow{
  width: 10%;
  min-width: 24px;
  text-align: center;
}

.Select-menu-outer{
  font-family: sans-serif;
}

The file is stored in my asset folder. It contains other style for other elements too.
When I upgraded from 0.37.2 to 0.38.0, the css file is still loaded (other elements do get styled), however, dcc are not styled anymore:

pip install -Iv dash-core-components==0.37.2: OK (right dropdown size)
screenshot from 2018-11-13 15-31-26

pip install -Iv dash-core-components==0.38.0: ERROR (dropdowns are styled as default, despite css)
screenshot from 2018-11-13 15-31-04

@chriddyp
Copy link
Member

@valentijnnieman Do you know what's going on here? Did the CSS rules change in our upgrade or is our new CSS-in-JS method just placing our component CSS after user-supplied CSS?

@valentijnnieman
Copy link
Contributor

Looks like style-loader inserts the CSS at the bottom by default - causing user specified CSS (in /assets) to be loaded before, preventing it from overwriting the defaults. Thanks for reporting! I'll get a fix up for this as soon as possible.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
dash-type-bug Something isn't working as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants