Implement sticky header for list name / breadcrumbs

Our lists get very long, and it would be nice to have the tools stay at the top, as well as the list name so we see what list we’re in (especially with multiple lists open in multiple browser tabs).

Basically the grey title header and other information at the top of the page would stay there. This can maybe be an option.

There is a relevant post on how to implement something close with CSS: Fixed header / tool bar

Seems like a good option to me - Charles Heckscher

2 Likes

Hello folks,

We’ve implemented a preliminary version of this feature, and it is available on https://beta.checkvist.com

Please let us know if you like it and/or if you notice any bugs.

And if you have UI customizations - does it work OK with it?

Thanks!

Hi,

we’re trying another thing on beta - showing sticky parents. Right now only the top-level items are sticky when scrolling. But we’d like to show the full context for the currently visible level. Would you find it useful?

Thanks,
KIR

1 Like

Yeah I’ve tested it, it looks great, it stays clickable. I can reduce using bookmarks. There’s potential here.

As always, as long as it’s not too hard to code.

I would like this to be optional (default on or off doesn’t matter to me)

Screen real estate is precious and this does hijack it in cases where i really just want the exact section I’m working on.

1 Like

I was thinking to make it a global per-user setting, “Use sticky parent items” or something like this, probably enabled by default.

But could you tell more about the hijacking case - the idea was to show the context of the current item, so it indeed relates to the section you’re working on.

Could you probably share a screenshot of the problematic view? Maybe via email.

Thanks!

1 Like

Here are 2 screenshots that show how much less content I can fit in my screen with the sticky header (granted the entire header is many more of the pixels than just the single parent item but every line counts)


1 Like

ohh, i see, now the entire header/menu is kind of fixed.

@justin Right, we’ll make an option for this. The question is whether to have 2 options for sticky header and sticky parents or only one.

1 Like

@maxkir More options! That’s why we’re paying you the big bucks, right? :wink: I don’t feel strongly about splitting them up or not.

1 Like

Checkvist breadcrumbs started to look “messy”, so I came here to find a possible cause. Is it just me or does anyone else see list items floating above the breadcrumbs in Zen mode when scrolling longer lists?

1 Like

I’ve been seeing that too.

Hello @Ralf,

May I take a look into your account? I suppose some custom CSS may have caused this.

As a workaround, you may disable “Sticky header” option on the settings page.

Sorry for the problem.

Kind regards,
KIR

Hi KIR,

Thanks for the quick reply. I’ve also tried to remove custom CSS; did not help. You may have a look at the account settings and the test list /checklists/116436 – perhaps you have an idea.

For me, the solution likely involves setting top: 0 and adding some background (e.g., linear-gradient(to bottom, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%)) for toolbarDiv–fixed. This would prevent space loss at the top while allowing the list items to fade slightly. So it’s no big deal. I just have overlooked the launch of the feature.

Kind regards,
Ralf

Hello,

I believe I’ve got it fixed. My initial solution for the problem did not work due to a CORS issue for the cloud front assets, and now it should be better.

Could you please check?

As for the missing launch - we haven’t officially launched it yet, it was a silent release – I wanted to be sure we didn’t break anything. Ha.

Thanks a lot,
KIR

1 Like

Hi KIR,

Looks good now, no more overlapping:

We can check this off silently. :wink:

Thanks,
Ralf

2 Likes

Hello folks,

We’ve implemented both “sticky header” and “sticky parents” options, they are enabled by default on https://beta.checkvist.com.

Do you see notice bugs there? We plan to release it on the main checkvist.com site on Monday.

Thanks!
KIR

1 Like

Makes sense, as I’m a fan of “context.”

But I’m also a fan of minimalism and clean space. I need to switch between the two frequently: context for understanding, minimalism for focused work after having understood—and back to context when I’m confused again. :wink:

With the setting being in options, this is not quickly possible. I’d prefer to have it at my fingertips, like hc, hf, om. (Interestingly, I seem to perceive that differently than when working in IntelliJ, where I always want the context and not an empty space. Maybe because stickiness takes more space in Checkvist.)