Vaadin-grid: In iOS grid with `flex: auto` does not set correctly scrolling height

Created on 26 Jan 2018 · 16Comments · Source: vaadin/vaadin-grid

in iOS, when having a vaadin-grid into a vertical container, items does not cover all available height because scroller has a 400px size instead of adapting to the host size which is correct.

Code

    <div style="width: 100vw; height: 100vh; display: flex; flex-direction: column">
      <div>TOP</div>
      <vaadin-grid items='[1,2,3,4,5,6,7,8,9,10,11,12,13,14]' style="width: 100%; flex: auto">
        <vaadin-grid-column>
          <template>row [[item]]</template>
        </vaadin-grid-column>
      </vaadin-grid>
      <div>BOTTOM</div>
    </div>

Screeshot

grid

Browsers Affected

[x] iOS Safari

Source

manolo

Most helpful comment

@heruan please follow https://github.com/vaadin/vaadin-grid/pull/1220 i’ll try to somehow resolve this and the connected issue #1202 there.

platosha on 14 Feb 2018

👍2

All 16 comments

This is a known limitation. The internal scroller requires an explicit height (and relies on the parent elements to provide that). flex: auto; is not an explicit height, unfortunately.

jouni on 26 Jan 2018

This applies to macOS Safari as well.

jouni on 26 Jan 2018

As a workaround, use a wrapper div and absolute positioning for the grid:

  <div style="width: 100vw; height: 100vh; display: flex; flex-direction: column">
    <div>TOP</div>
    <div style="position: relative; flex: auto;">
      <vaadin-grid items='[1,2,3,4,5,6,7,8,9,10,11,12,13,14]' style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;">
        <vaadin-grid-column>
          <template>row [[item]]</template>
        </vaadin-grid-column>
      </vaadin-grid>
    </div>
    <div>BOTTOM</div>
  </div>

jouni on 26 Jan 2018

So, probably it should work if grid has a children wrapping the actual scroller and we could workaround in the component, I mean something like

<vaadin-grid style="position: relative; flex: auto;">
  #shadow 
    <div id="scroll-wrapper" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;">
       <div id="scroller">
       </div>
    </div>
</vaadin-grid>

@jouni WDYT?

manolo on 26 Jan 2018

Possibly. I can try to prototype that, I’m currently working on theme updates anyway.

jouni on 26 Jan 2018

Actually, I’m not able to reproduce the issue with master. What version are you using?

jouni on 26 Jan 2018

I'm using latest

$ grep version bower_components/vaadin-grid/package.json
  "version": "5.0.0-alpha6",

My html full content is:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="bower_components/vaadin-grid/vaadin-grid.html">
    <link rel="import" href="bower_components/vaadin-ordered-layout/vaadin-vertical-layout.html">
  </head>
  <body style="font-family: arial; font-size: 20px; margin: 0">
    <div style="width: 100vw; height: 100vh; display: flex; flex-direction: column">
      <div>TOP</div>
      <vaadin-grid items='[1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10]' style="flex: auto">
        <vaadin-grid-column>
          <template>row [[item]]</template>
        </vaadin-grid-column>
      </vaadin-grid>
      <div>BOTTOM</div>
    </vaadin-vertical-layout>
  </body>
</html>

And I'm using simulator iOS 10.3 - iPhone 6 - User Agent: "Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E8301 Safari/602.1"

manolo on 29 Jan 2018

But wait ... , seems that I cannot reproduce anymore with that setup. Need to spend more time to figure out how to reproduce

manolo on 29 Jan 2018

Seems that this issue has been fixed in some Safari update. I can reproduce it still in iOS 9.3.

jouni on 29 Jan 2018

But yeah, if this needs to be fixed, it seems like it’s just a matter of changing the core styles to:

#scroller {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(0);
}

@tomivirkki, WDYT? Do you see some possible risks with that?

jouni on 29 Jan 2018

👍1

I'm pretty sure the feature presented in "Dynamic Height" demo wouldn't work properly with this change though.

tomivirkki on 29 Jan 2018

Apparently it works if position: relative
http://g.recordit.co/y0UtE79fg9.gif

manolo on 29 Jan 2018

But relative, seems not to work in iOS 😞

manolo on 29 Jan 2018

"Dynamic Height" demo wouldn't work properly with this change though.

Thinking a little more about this, isn't this a corner case? I cannot see a real app where the user want to use a component like the grid, if the height is based on the internal number of rows, probably a dom-repeat would be a better election. But otherwise, I can see most cases where the grid have to adapt to it's external container. IIRC fw grid does not have the feature of dynamic height based on number of rows.

But anyways, it could be a feature to enable via some config property or theme, or better if the scroller was a themable part.

manolo on 30 Jan 2018

What is the status of this? I agree with @manolo about the common need for the grid to adapt to its container, e.g. setting flex-grow: 1 on a grid inside a vaadin-vertical-layout.