search

mariobuikhuizen / voila-embed

Embed jupyter widgets in existing websites
Other
52 stars 7 forks source link

conflict between main site css and voila css #7

Open havok2063 opened 4 years ago

havok2063 commented 4 years ago

With commit https://github.com/mariobuikhuizen/voila-embed/commit/d14c1c645a7fc3053009b55952ebccaa8be45288, this fixes the bqplot styling issue, but introduces a conflict with our main front-end css. Specifically, adding the rel="stylesheet" to the voila/static/theme-light.css causes the Voila styling to override the default styling of the main site. I haven't dug into the css to see which components are actually in conflict.

Arguably, this could just be details in what we have set on sites that can be tweaked or ironed out by us. But in principle, I think we don't want notebook stylesheets to override site stylesheets as much as possible. This especially applies, for example, to companies that have finely-tuned, controlled, stylesheets for branding but who still wish to embed content via Voila. I don't know what all this particular Voila styling controls, but I imagine it should pertain to all widgets embedded on the page, but leave the rest of the page styling to any existing stylesheets.

havok2063 commented 4 years ago

Digging into things a bit. It looks like the conflict might be in the body element.

in our static/css/site.css

body {
    font-family: 'Overpass-Regular', 'Overpass';
    font-weight: 400;
    font-style: normal;
    margin-bottom: 234px;
}

in the voila/static/theme-light.css which gets loaded last after our css. 

body {
  font-family: var(--jp-ui-font-family);
  background: var(--jp-layout-color3);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

I was able to sort of fix the issue on our end by tweaking our body styling from body to a unique .asb-body class. There are still other small discrepancies. But this solution may not be available for everyone. It still might be worth exploring other solutions.