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
• 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?