Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Comments

Projects
None yet
3 participants
@EBoisseauSierra
Copy link

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

This comment has been minimized.

Copy link
Member

commented Nov 13, 2018

@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

This comment has been minimized.

Copy link
Contributor

commented Nov 14, 2018

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 join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.