Grafana start but stylesheets not displayed

Hi,

I’m new to Grafana. I download and start grafana server but when I load in any browser (firefox and chrome latest) grafana it’s not well displayed like he miss some stylesheets but if I look into debug the stylesheets it’s loaded from browser but not rendered.
Why?

How did you install? What platform are you using? What version did you install?

Make sure you used an official build or our package cloud apt repo

Hi Torkel and thank you for reply.

I have downloaded grafana-4.5.2.windows-x64.zip in my windows 10 development machine, I have copy sample.ini and rename new file in custom.ini then I have start grafana-server.exe and go to localhost:3000 with my browsers.

I try to turn off antivirus and windows firewall but nothing.
I try to run grafana on another windows 10 machine and works.

In my machine i have nodejs, xampp and other development tools but all are stopped.

Did you try this (from the docs):

The default Grafana port is 3000, this port requires extra permissions on windows. Edit custom.ini and uncomment the http_port configuration option (; is the comment character in ini files) and change it to something like 8080 or similar. That port should not require extra Windows privileges.

I have disable windows firewall and I have just used port 3000 for some other nodejs projects so I try to switch to port 3333 and the result it’s the same. Look the screenshot of chrome browser and see that the stylesheet grafana.dark.min.css it’s loaded from chrome.

Any errors in the Grafana server logs?

Hi, seems grafana serves css file with a wrong myme type.
Debugging http stream i noticed that css resource are served with “application/x-css” instead of “text/css” so the browser do not apply it.
Any idea where Grafana integrated web server relys about mime types under windows OS?
Thank you very much!!

Good investigating skills there! That is really weird - is it possible you have installed a program that has hijacked the mime type for CSS files?

Just guessing here but if you check the following key in regedit: HKEY_LOCAL_MACHINE\SOFTWARE\Classes.css
what value does “Content Type” have?

ref:

hi Daniellee,
this is the first thing i tought too and i’ve chacked the registry to investigate.
Effectively the registered myme type was wrong. A css editing application altered it.
I’ve used a mime type editing tool named filetypesman-x64.zip to correct it.
Mimetype now appear correct. Grafana has been stopped, Windows has been restarted, Grafana Restarted… Still the problem persist :frowning:
I’ve also reinstalled Grafana completely suspecting that the integrated http server copied mime type configuration inside database at startup.
No!! New database from scratch but still css problem :frowning:
Also the completely new installation do not serve css correctily.
Now the problem is: where the Grafana integrated http server read and store his configurations about mime types? There must be some place where this information still reside and is read at server startup. I cannot explain this use case in any other way…

Looks like you might have fixed the wrong key - should be HKEY_CLASSES_ROOT (not HKEY_LOCAL_MACHINE)

See this article for another service (gogs) which uses the same web framework (go macaron) as Grafana:

Googling for this, this old issue says that Go uses the mime types from the Windows registry:

so I think something is still wrong in your windows registry.

I have changed .css registry setting in both HKEY_CLASSES_ROOT and HKEY_LOCAL_MACHINE, restart machine, delete grafana folder and extract again grafana from zip file and run but without any result.

I have search for .css in the registry and only in two setting there is content type key and set to text/css.

A couple of sanity checks:

  • Is it the same for different browsers? Have you tested in Internet Explorer?
  • Is it the same in incognito mode (maybe Chrome has cached the css)

Otherwise I don’t really have any other ideas on how to fix this.

Just so I know to avoid it - what editor/IDE caused this?

WORKS!!!

I try microsoft edge and ta ta! works. Then I erase all cache from firefox and chrome and now works!!!

I use PHPStorm IDE and on the latest upgrade he set itself to open css with wrong mime type.

1 Like