graphql-playground: Cannot scroll through the result pane of an subscription

This issue pertains to the following package(s):

GraphQL Playground - Electron App
GraphQL Playground HTML
GraphQL Playground
GraphQL Playground Express Middleware
GraphQL Playground Hapi Middleware
GraphQL Playground Koa Middleware
GraphQL Playground Lambda Middleware

What OS and OS version are you experiencing the issue(s) on?

Windows 10

What version of graphql-playground(-electron/-middleware) are you experiencing the issue(s) on?

1.7.x

What is the expected behavior?

Can scroll the result panel to see all events.

What is the actual behavior?

When I try to use the mouse wheel nothing happens.

What steps may we take to reproduce the behavior?

Just make a simple subscription query and get some events to see the problem.

Idea of how to solve the problem:

Currently the result panel has height: auto, you have to do the height calculation that the panel should have using javascript when the app is mounted or make the editor container have the height you want/possible and make the result panel have height: 100%.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 45
Comments: 16 (3 by maintainers)

Most upvoted comments

For now, the only solution is install an extension to inject this css into localhost pages.

.graphiql-wrapper>div:first-child>div:first-child>div:nth-child(2) {
  height: 100%;
}
.graphiql-wrapper>div:first-child>div:first-child>div:nth-child(2)>div:nth-child(2) {
  height: 100%;
  overflow-anchor: auto;
}

+15

iagobruno on Oct 22, 2019

Also experiencing this problem.

+11

loudmouth on May 2, 2019

still a problem…

arnasledev on Jun 15, 2020

Anything new on this?

vizo on Feb 18, 2020

fitalefi on Mar 13, 2020

@smeijer I tested your recommendation but it causes a scrollbar bug when a new result is added (I have no idea why), but the overflow-anchor property will make the last added item always visible if you scroll to extreme bottom.

iagobruno on Oct 22, 2019

@iagobruno , I can recommend adding display: flex and flex-direction: column-reverse to that snippet, to inverse the direction. This way you’ll always have the most recent data on top. Making it unnecessary to scroll:

display: flex;
flex-direction: column-reverse;

smeijer on Oct 22, 2019