Graphiql: Graphiql height is not 100%

[blaiprat]

When I open Graphiql it looks like this

It looks like that html and body tags need to have their height set to 100% so the layer #graphiql-container can expand too.

I've tried also opening in safari and in chrome on incognito window (without any extension running) and the same happens.

[KATT]

+1

[leebyron]

Are you running graphiql via express-graphql?

I realized that I had just released a breaking change in a point release, so I republished to account for the breaking change. I'll make the change to express-graphql now as well.

[leebyron]

Ok, I could easily reproduce this issue when trying to update http://graphql-swapi.parseapp.com/. I've got new versions of both graphiql and express-graphql on npm which should fix this, and have unpublished the offending ones so people don't accidentally run into this when they npm install!

Thanks again for the fast report

[blaiprat]

Reinstalled node_modules and it shows fine now. Thanks for the quick fix and the awesome work!

[leebyron]

Most excellent, thanks for confirming the fix!

[mkuts12]

Hey @leebyron, I have the same issue but I don't use express-graphql.
I work in a company with closed network and express-graphql uses cdns.

I use webpack with css and style loaders for the css.
I've made a project with the problem. It's very simple and I will be happy if you help me. I'm simply lost

https://github.com/mkuts12/graphiql-testing

[mkuts12]

Hey again,
after investing almost two days into figuring out what the hell is going on, it appears that the problem is the id of the div i try to render into.
In your example it is set to 'graphiql' and in my project it is 'app'.
when chaning my app to 'graphiql' it worked. and when changing in your example 'graphql' to 'unique' it didn't work anymore.

I am shocked

[mkuts12]

I am infinitely sorry. Of course it won't work since the way css works.
maybe you can write about it in the readme or bind the css to the component, please?

[leebyron]

I'm glad you figured out what was going on! I'll find a way to make the css bindings more appropriate so that this kind of issue is harder to get yourself into in the future.