Graphiql: codemirror widths and lefts are so large they push codemirror to right edge of browser

Created on 16 Sep 2015 · 9Comments · Source: graphql/graphiql

using babel and webpack-dev-server to bundle and serve the the rendered GraphiQL component. For some reason the margin-left and certain width style properties are set to almost the entire width of the screen so all i see is a blank space and then the first character of each code line up against the right side of the browser window

<div class="CodeMirror-sizer" style="margin-left: 1904px; margin-bottom: 0px; border-right-width: 30px; min-height: 675px; min-width: 619px; padding-right: 0px; padding-bottom: 0px;">
   <div ....>....
  </di>
</div>

screen shot 2015-09-15 at 11 03 30 pm

Source

gnoff

Most helpful comment

I encountered the same problem recently. After dived into the source code of CodeMirror and fixed my issue I think it is better to share my experience here. In case someone else get stuck by this really weird, tricky issue.

TL;DR: Find a way to ensure graphiql.css is loaded before <GraphiQL /> get rendered. Be very careful when playing with Webpack code-splitting and GraphiQL at the same time.

My problem is highly related with the differences of the style processing between dev and prod of a customized version of start-react-app. I also used "code splitting" technique to split the GraphiQL and CodeMirror from the main bundle.

In general, in dev mode all styles are loaded in inline <style> block by style-loader and there's no problem. However, in prod mode, instead of being added to main.css, the graphiql.css was added to the chunk file which contained CodeMirror and GraphiQL.

It took me a lot of hours trying to upgrade my old react-relay to the newest version (since apparently the graphiql package required graphql@^0.10.5 via codemirror-graphql via graphql-language-service-interface) therefore I can upgrade graphiql to the newest one. However after the upgrading I found the problem existing with the newest version. Then I started to set breakpoints and debug CodeMirror. Then I found without the proper style, .CodeMirror-gutter.CodeMirror-foldgutter became "display: block" instead of "display: inline-block". The width of that element cascaded to all its parent elements and caused the disaster. Even graphiql.css was loaded immediately after the initialization, the mess didn't go away.

Once found the problem, I changed my code to ensure that graphiql.css must be loaded before <GraphiQL /> get rendered. The problem was gone.

philiptzou on 26 Jul 2017

❤9

All 9 comments

Whoa this is crazy, what browser/OS are you using? Can you also verify that you have the graphiql.css file loaded into the browser?

leebyron on 17 Sep 2015

nothing crazy. chrome on osx.

I guess I took the readme example a little to literally and used just

import React from 'react';
import GraphiQL from 'graphiql';
import fetch from 'isomorphic-fetch';

function graphQLFetcher(graphQLParams) {
  return fetch(window.location.origin + '/graphql', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(graphQLParams),
  }).then(response => response.json());
}

React.render(<GraphiQL fetcher={graphQLFetcher} />, document.body);

and an index.html of

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>GraphiQL on localhost</title>
</head>
<body>
  <script src="/static/bundle.js"></script>
</body>
</html>

and served the above with webpack-dev-server

I now see you have examples using static asset css files. I'll introduce that to my index and I'm sure it'll fix things... I'll confirm in a bit

gnoff on 17 Sep 2015

I was assuming all inline styles in the <GraphiQL /> component :)

gnoff on 17 Sep 2015

Ok just needed to add css-loader to webpack.config and all is good again.

gnoff on 17 Sep 2015

TL;DR: Find a way to ensure graphiql.css is loaded before <GraphiQL /> get rendered. Be very careful when playing with Webpack code-splitting and GraphiQL at the same time.

Once found the problem, I changed my code to ensure that graphiql.css must be loaded before <GraphiQL /> get rendered. The problem was gone.

philiptzou on 26 Jul 2017

❤9

@philiptzou do you have recommendations as to how you ensure the stylesheet is loaded first? Or could you share how you went about this?

mikefowler on 21 Mar 2018

@mikefowler

I used setTimeout() to delay the rendering of <GraphiQL /> element. I know it's not 100% guaranteed but it is enough for my case. If you need to ensure the loading sequence, I think you can use setInterval() to check if the codemirror.css was loaded, then setState() to render <GraphiQL /> element and clearInterval().