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

HC5 - Inline styles #6173

Closed
sebastianbochan opened this issue Dec 23, 2016 · 7 comments
Closed

HC5 - Inline styles #6173

sebastianbochan opened this issue Dec 23, 2016 · 7 comments

Comments

@sebastianbochan
Copy link
Contributor

@sebastianbochan sebastianbochan commented Dec 23, 2016

Expected behaviour

No inline styles

Actual behaviour

Inline styles are still applied.

Live demo with steps to reproduce

We still have inline styles:

Affected browser(s)

All browsers

zrzut ekranu 2016-12-23 o 11 02 08

EDIT:

  • errors when content-security-policy header is applied
@KacperMadej
Copy link
Contributor

@KacperMadej KacperMadej commented Jan 30, 2017

Another inline CSS can be found in defaultOptions for tooltip. It is later producing style="font-weight:bold" in SvgRenderer.

Loading

@KacperMadej
Copy link
Contributor

@KacperMadej KacperMadej commented Feb 1, 2017

Another problem: For Content Security Policy <style>.highcharts-tooltip-0{filter:url(#drop-shadow-0)}</style> that is being added to <defs> when displaying a tooltip (here in code) is considered violation of inline styles.

Demo: http://jsfiddle.net/ksvbztm0/ (content of the problematic style tag in browser console)

Loading

@KacperMadej KacperMadej reopened this Feb 1, 2017
@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Feb 2, 2017

Now that's a tough one. I don't know how we can apply the drop shadow without this inline style. It references another definition, and if we put the style rule in the external CSS, we mess up the reference. So in order to accomplish this I think we need to disable the shadows entirely or if possible avoid using filters. The same goes for the different faces of 3D columns.

A workaround is to override the Tooltip.applyFilter function: http://jsfiddle.net/highcharts/ksvbztm0/1/

Loading

@sebastianbochan
Copy link
Contributor Author

@sebastianbochan sebastianbochan commented Aug 11, 2017

+1

Loading

@stale
Copy link

@stale stale bot commented Sep 24, 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

Loading

@KacperMadej
Copy link
Contributor

@KacperMadej KacperMadej commented Jun 8, 2021

Internal note:
If we add an additional test for tooltip.options.shadow we wouldn’t need the applyFilter override.

if (styledMode && options.shadow) {
      // Apply the drop-shadow filter
      this.applyFilter();
      this.label.addClass('highcharts-tooltip-' + this.chart.index);
  }

Loading

@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Jun 8, 2021

Actually this can be fixed directly. We just apply the filter as an attribute rather than a style. Fix coming up.

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

4 participants