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

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

iOS Safari

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 16 (16 by maintainers)

Commits related to this issue

make grid scroll cover all grid room in iOS This is a workaround for https://github.com/vaadin/vaadin-grid/issues/1203 Jira: BFF-573 — committed to vaadin/bakery-app-starter-flow-spring by manolo 6 years ago
make grid scroll cover all grid room in iOS This is a workaround for https://github.com/vaadin/vaadin-grid/issues/1203 Jira: BFF-573 — committed to vaadin/bakery-app-starter-flow-spring by manolo 6 years ago
make grid scroll cover all grid room in iOS This is a workaround for https://github.com/vaadin/vaadin-grid/issues/1203 Jira: BFF-573 — committed to vaadin/bakery-app-starter-flow-spring by manolo 6 years ago
make grid scroll cover all grid room in iOS This is a workaround for https://github.com/vaadin/vaadin-grid/issues/1203 Jira: BFF-573 — committed to vaadin/bakery-app-starter-flow-spring by manolo 6 years ago
iOS fixes (#400) * make grid scroll cover all grid room in iOS (this is a workaround for https://github.com/vaadin/vaadin-grid/issues/1203) * Fix app cropped in iOS when safari navbar is displayed * ... — committed to vaadin/bakery-app-starter-flow-spring by manolo 6 years ago
iOS fixes (#400) * make grid scroll cover all grid room in iOS (this is a workaround for https://github.com/vaadin/vaadin-grid/issues/1203) * Fix app cropped in iOS when safari navbar is displayed * ... — committed to vaadin/bakery-app-starter-flow-spring by manolo 6 years ago
iOS fixes (#400) * make grid scroll cover all grid room in iOS (this is a workaround for https://github.com/vaadin/vaadin-grid/issues/1203) * Fix app cropped in iOS when safari navbar is displayed * ... — committed to vaadin/bakery-app-starter-flow-spring by manolo 6 years ago
iOS fixes (#400) * make grid scroll cover all grid room in iOS (this is a workaround for https://github.com/vaadin/vaadin-grid/issues/1203) * Fix app cropped in iOS when safari navbar is displayed * ... — committed to vaadin/bakery-app-starter-flow-spring by manolo 6 years ago
Add `layout-fit` attribute to enable sizing by parent layout Fixes #1203 — committed to vaadin/vaadin-grid by platosha 6 years ago
Add `layout-fit` attribute to enable sizing by parent layout Fixes #1203 — committed to vaadin/vaadin-grid by platosha 6 years ago

Most upvoted comments

@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 Feb 14, 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 Jan 29, 2018