Padding at the end of the grid

[Pupix]

Description

Using a Material Design approch with this grid/table creates parts of unusable UI as shown below:

The more icon on the left gets stuck behind the FAB. This issue is usually solved with an additional padding at the end of the list that lets you scroll past the last line.

I tried using padding-bottom on the vaadin-grid element but that makes the whole scroller go up by X px

I also tried using an empty footer which gives me the intended results

but also adds a sideffect making the area where the footer is unclickable

Trying to add pointer-events: none with --vaadin-grid-footer-cell doesn't do anything because the clickable area is vaadin-grid-table-footer-cell inside the shadow-dom with no styling hook.

[web-padawan]

@Pupix can you add a wrapper component to position the paper-fab properly: https://jsbin.com/gaqumem/edit?html,output

See also how this is implemented in our expense-manager demo, live demo is here

The grid is not expected to accept arbitrary content like this, and has nothing to do about positioning of it. As you can see, this can be achieved by CSS, therefore I'm closing this issue.

[jouni]

Not sure if @web-padawan understood the need in full detail…

I see the problem being, that the grid should cover the full page height (or at least stretch all the way down) and the floating button can cover the rows. But when scrolled all the way down, the last rows should not be covered by the floating button.

I don’t see that happening in the jsbin.

[web-padawan]

Reopened the issue, let's consider if we want to verify this as a valid use case, especially for Material theme. I don't see any mentions of the full page height here, though.

BTW, it is also quite common to place chat widgets in the bottom right screen corner (Zendesk, Intercom etc) but as a developer, I would rather try to reserve some padding at the bottom of the screen for that, not inside of the grid element itself.

[Pupix]

Just to confirm, yes, the table should extend all the way down/cover the rest of the screen, just like @jouni said. You can consinder each screenshot a viewport if you want.

The DOM I've got going on looks like so:

<template>
    <style>
        :host {
            display: block;
            height: 100%;
            overflow: hidden;
            @apply --layout-vertical;
        }

        :host vaadin-grid {
            background: transparent;
            border: none;
            @apply --layout;
            @apply --layout-flex;
         }
    </style>

    <custom-header></custom-header>
    <vaadin-grid>
        ...
    </vaadin-grid>
    <mat-fab></mat-fab>
</template>

custom-header has a predefined height. mat-fab is positioned with absolute.

[Pupix]

Hello? It's been 3 months 😞

[tomivirkki]

Hi @Pupix, you could probably do this by adding a details row for the last item: https://jsbin.com/roviyosufi/edit?html,output

A quick and dirty solution would be to use the following style module (styling nodes other than "part"s not officially supported):

<dom-module id="grid-additional-space" theme-for="vaadin-grid">
  <template>
    <style>
      #items {
        border-bottom-width: 100px !important;
      }
    </style>
  </template>
</dom-module>