Documentation icon indicating copy to clipboard operation
Documentation copied to clipboard

SideNav List resetting...

Open tonejaco opened this issue 5 years ago • 7 comments

This has always bugged me with the Marlin documentation, when you click on the scrolling list (sidenav) of codes on the left it always resets it to the top of the list. The preferred action would be to leave the list alone or to center the selected item in the middle of the list.

tonejaco avatar Apr 09 '20 08:04 tonejaco

So I'm trying to understand exactly which code controls the actions of the sm-sidenav. Is it CSS, BS, JS, or just HTML?? Or, ALL OF THE ABOVE! :-)

The sidenav at "https://www.w3schools.com/" works the way I'd like to see this sidenav work. When you select an item in the list it sticks in vertical location at about 60% down the list. Auto focus perhaps is the term.

tonejaco avatar Apr 24 '20 03:04 tonejaco

Maybe the answer is here: https://github.com/angular/components/issues/9225 No, not angular.

tonejaco avatar Apr 24 '20 04:04 tonejaco

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

parachvte avatar Apr 26 '20 07:04 parachvte

Nice. Would that be applied to the snapmaker.scss file?

tonejaco avatar Apr 26 '20 17:04 tonejaco

See #9 I added a simple script on the page.

Oh but it scrolls main content as well, unexpected.

parachvte avatar Apr 27 '20 08:04 parachvte

But that's ok because the main content is changing to the new page isn't it? It's not really scrolling because it's a different page being referenced.

Oh, I see that some pages scroll down just a bit. Pages that are shorter than the region don't have the problem. The region for that area must go to the top of the window instead of the bottom of the Navbar. I can see that the scroll bar on the right goes up into the Navbar region. That might also be related to the two regions overlapping when viewed on a phone or small screen. (You can simulate that by dragging the window to a very narrow width.)

Maybe it's because the two regions overlap. That is consistent with what it looks like when you drag the window to a narrow width.

Maybe you just need to scroll the frame and not the whole window? Maybe Bootstrap doesn't use frames??

tonejaco avatar Apr 27 '20 16:04 tonejaco

Adding a "window.scrollBy(0,-63);" inside that script at the end fixes it. Maybe it should be -64. Well, almost. The bottom sm-sidenav list items don't work right I guess because the window can't scroll it doesn't. Then the "scrollBy" doesn't work it's magic.

You can see the effect in my fork: https://tonejaco.github.io/Documentation/gcode/G000-G001

I notice one other problem, when you scroll the gCode content section (when its scrollable) is will also scroll the sidenav up a small amount.

tonejaco avatar Apr 29 '20 02:04 tonejaco