🏠 back to Observable

How can I make fixed position cells such as a tool bar or input form?

How can various input cells such as sliders and checkboxes be visually combined in a “toolbar” cell at a fixed position (such as near the top, just below the title), and then make that cell and perhaps the title cell remain in view while the rest of the notebook scrolls vertically below them?

I’m a relative newbie at Observable. I have started working on it at https://observablehq.com/@david-hall/toolbar-question, but I’m not sure if I’m even on the right track by using CSS. That notebook also mentions some other approaches that I have considered.

Interrestingly, as I add this question to the forum, it’s in a dialog that behaves similar to what I want. It is positioned at the bottom of the page and other recent postings all scroll behind the input form.

Any suggestions or examples of how to implement such a tool bar?
Thanks.

Sadly, you can’t do so on the main observablehq.com site (and this is intentional):

The best you can do is set this up to work when you embed your notebook on another site.

1 Like

Thanks for the quick response. Having to host my final document on another site just so I can control the layout of cells in an Observable notebook initially seemed like overkill to me, but now I can understand the security issues with user content masquerading as system content. Looks like embedding my notebook on another site is my best bet. The tutorial at https://observablehq.com/@observablehq/downloading-and-embedding-notebooks makes it seem prety simple. I’ll give it a shot. Thanks again.

2 Likes