{"action":"created","issue":{"url":"https://api.github.com/repos/graphql/graphiql/issues/170","repository_url":"https://api.github.com/repos/graphql/graphiql","labels_url":"https://api.github.com/repos/graphql/graphiql/issues/170/labels{/name}","comments_url":"https://api.github.com/repos/graphql/graphiql/issues/170/comments","events_url":"https://api.github.com/repos/graphql/graphiql/issues/170/events","html_url":"https://github.com/graphql/graphiql/issues/170","id":178636904,"number":170,"title":"query-editor loads as collapsed","user":{"login":"mattkrick","id":5514175,"avatar_url":"https://avatars.githubusercontent.com/u/5514175?v=3","gravatar_id":"","url":"https://api.github.com/users/mattkrick","html_url":"https://github.com/mattkrick","followers_url":"https://api.github.com/users/mattkrick/followers","following_url":"https://api.github.com/users/mattkrick/following{/other_user}","gists_url":"https://api.github.com/users/mattkrick/gists{/gist_id}","starred_url":"https://api.github.com/users/mattkrick/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mattkrick/subscriptions","organizations_url":"https://api.github.com/users/mattkrick/orgs","repos_url":"https://api.github.com/users/mattkrick/repos","events_url":"https://api.github.com/users/mattkrick/events{/privacy}","received_events_url":"https://api.github.com/users/mattkrick/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-09-22T15:09:14Z","updated_at":"2016-10-13T19:46:41Z","closed_at":null,"body":"In my deployment, I've noticed 3 things that can cause the query-editor to load in a collapsed state (`height: 0` no gutters, no line numbers, `left` values that are very large for many child DOM elements). It ends up looking like this: \r\n![screen shot 2016-09-22 at 7 55 42 am](https://cloud.githubusercontent.com/assets/5514175/18753529/78cba04a-809a-11e6-91f3-17177db4fbb3.png)\r\n\r\nI'm current at 0.7.3, and doing any of the 3 causes this bug:\r\n- wrapping the `GraphiQL` component in a div\r\n- loading the css file at the component level (eg using react-helmet)\r\n- upgrading from 0.7.3 to 0.7.8\r\n\r\nHas anyone else experienced this? Resizing the window does not help. Additionally calling `cm.refresh()` doesn't help either. `cm.setSize(null, 100)`, which sets the height to 100px, doesn't increase the size of the parent div, so the text sits on top of the variable-editor text. Not sure what else to try. I don't think this is a code mirror issue because the variable-editor loads perfectly fine.\r\nHopefully whatever result comes out of #152 will also fix this."},"comment":{"url":"https://api.github.com/repos/graphql/graphiql/issues/comments/253618696","html_url":"https://github.com/graphql/graphiql/issues/170#issuecomment-253618696","issue_url":"https://api.github.com/repos/graphql/graphiql/issues/170","id":253618696,"user":{"login":"asiandrummer","id":1537569,"avatar_url":"https://avatars.githubusercontent.com/u/1537569?v=3","gravatar_id":"","url":"https://api.github.com/users/asiandrummer","html_url":"https://github.com/asiandrummer","followers_url":"https://api.github.com/users/asiandrummer/followers","following_url":"https://api.github.com/users/asiandrummer/following{/other_user}","gists_url":"https://api.github.com/users/asiandrummer/gists{/gist_id}","starred_url":"https://api.github.com/users/asiandrummer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/asiandrummer/subscriptions","organizations_url":"https://api.github.com/users/asiandrummer/orgs","repos_url":"https://api.github.com/users/asiandrummer/repos","events_url":"https://api.github.com/users/asiandrummer/events{/privacy}","received_events_url":"https://api.github.com/users/asiandrummer/received_events","type":"User","site_admin":false},"created_at":"2016-10-13T19:46:41Z","updated_at":"2016-10-13T19:46:41Z","body":"@mattkrick - sorry for some delay in investigating this. Like you mentioned it seems like the problem is Helmet doesn't provide `graphiql.css` file at the time when `GraphiQL` component gets mounted for the first time. I cloned `action` repository and played with it a bit, and I think the only solution that I can think of now would be catching when the `graphiql.css` is loaded, and either mount `GraphiQL` component then and/or call CodeMirror's `refresh()` function. I'm guessing that calling `cm.refresh()` didn't work for you because at that time `graphiql.css` wasn't loaded yet.\r\n\r\nOr we could do something similar to the below, where we listen to the `load` event of `<link />` we're adding:\r\n\r\n(I'm not entirely sure how `react-helmet` operates, but from what I've seen there wasn't an easy way to determine when your `link` tag completes loading, but I think you get the point.)\r\n\r\n```js\r\n// In your `export default class Graphiql extends Component {`\r\nconstructor() {\r\n  super();\r\n  this.state = { cssLoaded: false };\r\n}\r\n\r\ncomponentDidMount() {\r\n  const $linkEl = document.createElement('link');\r\n  $linkEl.setAttribute('rel', 'stylesheet');\r\n  $linkEl.setAttribute('type', 'text/css');\r\n  $linkEl.setAttribute('href', '/static/css/graphiql.css');\r\n\r\n  const eventListener = () =>\r\n    this.setState({ cssLoaded: true }, {\r\n      $linkEl.removeEventListener(eventListener);\r\n    });\r\n  $linkEl.addEventListener('load', eventListener);\r\n\r\n  document.head.appendChild($linkEl);\r\n}\r\n\r\nrender() {\r\n  // ...\r\n  { this.state.cssLoaded ? <GraphiQL fetcher={fetcher} /> : null }\r\n}\r\n```\r\nNote that the above code isn't all-browser-compatible."}}
{"actor":{"display_login":"asiandrummer"}}