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

[iagobruno]

This issue pertains to the following package(s):

• [ ] GraphQL Playground - Electron App
• [ ] GraphQL Playground HTML
• [x] 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%.

[loudmouth]

Also experiencing this problem.

[phanatuan]

Me too!

[ksugiarto]

No update on this issue? Then how did you guys use this for Subscription all this long? Any workaround?

[smeijer]

Any workaround?

F5

[iagobruno]

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;
}

[smeijer]

@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;

[iagobruno]

@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.

[vojtapol]

This is broken in GraphQL Playground HTML too. Any idea how to temporarily fix it there?

[vizo]

Anything new on this?

[fitalefi]

+1

[adrianoresende]

+1

[arnasledev]

still a problem..

[AkashRajpurohit]

Why is the issue closed, still facing this issue

[beeman]

The scrolling issue is fixed in this version, however it is very possible that the GraphQL server you are using is using a different version of this library. I know that for instance Apollo maintains their own for which still has the bug.

[AkashRajpurohit]

The scrolling issue is fixed in this version, however it is very possible that the GraphQL server you are using is using a different version of this library. I know that for instance Apollo maintains their own for which still has the bug.

@beeman Yes, I am using Apollo maybe that's why the issue still persists in the playground version there.

Can you tell me where should I reach for to get this issue solved?

[smeijer]

The apollo-server repo.

https://github.com/apollographql/apollo-server