Panel: CSS overflow improvements

[hdodov]

Basically, I want my plugin to have an alert box that is fixed on the bottom of the page. Turns out to be quite tricky.

First of all, change:

.k-panel.view {
  overflow-y: scroll;
}

from scroll to auto. Otherwise, there's a disabled scrollbar in the view, even if there's nothing to scroll. Appears on Windows only.

Having padding-bottom: 6rem on .k-panel-view is tricky because it forces a bottom padding on the plugin view. It's better to have whitespace, but I think it would be better if it's up to the plugin author to decide whether to have spacing and how much. It can make it trickier to use position: sticky if there's padding on the outer container. The sticky element is at the bottom of the viewport, but when you reach the end so that the 6rem padding is visible, the element remains above that 6rem padding and is no longer at the bottom of the page. It looks ugly.

The other option is to use position: fixed to stick elements at the bottom of the page. It has better browser support and works better than sticky (the padding problem I described above wouldn't exist). However that can't work because .k-panel-view has transform: translateZ(0). If I remove that style, position: fixed starts to work. Problem occurs on Chrome and Firefox and the fix works in both of them.

Edit: Perhaps you could add a data-screen attribute to .k-panel so that we can selectively apply styles only to our plugin's view. For example:

.k-panel[data-screen=myplugin] {
  .k-panel-view {
    transform: none;
  }
}

[hdodov]

To replicate the position: fixed issue, add a plugin with the following Vue component:

<template>
  <div>
    <div class="content"></div>
    <div class="fixeddiv">
      fixed
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fixeddiv {
  padding: 5rem;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #ccc;
}

.content {
  height: 150vh;
}
</style>

The box should appear at the bottom of the page and remain at the same spot once you scroll. If you remove:

-webkit-transform: translateZ(0);
transform: translateZ(0);

from .k-panel-view, it should be fixed to the page as expected.