Optimize the Panel's scroll behavior#265

Please pardon my ignorance about potential technical limitations.

In the Panel, main.k-panel-view scrolls as it’s set to position: absolute and overflow-y: scroll. body and html are set to height: 100% and overflow: hidden.

This has the following drawbacks:

1. Scroll position is not preserved when navigating back to a page or reloading. This is frustrating when you have a pages/files section on the bottom of a long page and you need to go back and forth between the child pages and the parent. You’ll always get back to the very top of the parent page.

2. You can’t use the cursor keys to scroll or even ⌘↓ to get to the bottom or ⌘↑ to get to the top of the page. Maybe also bad for accessibility?

3. You can’t take full page Panel screenshots. That’s of course a very minor drawback and almost exclusively relevant to kirbysites.com. I still wanted to mention it because I often hear compaints when people submit their screenshots.

I’d really like to see this solved, because I had similiar problems with the panel’s scroll behavior in the past. Especially when writing on my iPad, I’m running into some weird bugs, like the top bar disappearing, when tapping into a text field.

While developing a new version of the Markdown field, this also causes problems with CodeMirror, while inserting text. It is often not possible for the library to scroll to the correct cursor position, when text is inserted and some modules, like autocomplete fail to position the popup correctly.

I just stumbled over this issue again. While this post is marked as “completed” it looks like nothing has changed. What happened? 😅

Adding something like that to the panel.css seems to work?

body, html {
  overflow: auto;
  min-height: 100%;
}
.k-panel-header {
  position: sticky;
  top: 0;
}
.k-panel-inside {
  display: block;
  position: static;
}
.k-panel-inside > .k-form-buttons[data-theme] {
  position: sticky;
  bottom: 0;
}
.k-panel-view {
  overflow-y: auto;
}

(quick and dirty)

I just stumbled over this issue again. While this post is marked as “completed” it looks like nothing has changed. What happened? 😅

Wondering the same thing. Keyboard scrolling is still broken in the panel which is quite the bad UX. PLEASE fix keyboard scrolling in the panel.

I spent a lot of time trying to fix this. In the end it’s something that the Kirby team needs to prioritize because some things need to be changed about the underlying architecture: https://github.com/getkirby/kirby/pull/4362