adding an additional sidebar with scrolling separate from the main document in a quarto HTML website

[ThierryO]

Description

I'm creating a website with quarto. Some pages have five ObservableJS figures and two ObservableJS "tables" (figures displaying a table). They all have some common inputs.

I"m looking for a way to bundle these ObservableJS input in a "sidebar" that is always on screen. My current workaround is use .panel-fill and .pane-sidebar and fix the sidebar on the screen using position: fixed css. This kind of works on a large screen. It fails when viewing the page on a smaller screen because of the lack of scrollbars.

I was hoping to display the inputs in a similar fashion as the local toc. The local toc doesn't scroll with the main text, has it own scrollbar and doesn't require the position: fixed css.

This page won't need a local toc. The website uses both a sidebar and navbar.

::: {.panel-fill}
code for the inputs
:::

::: {.panel-sidebar}
code for the inputs
:::

.card{
  position: fixed;
  right: 0px;
  top: 65px;
}

[mcanouil]

You can use almost all Bootstrap components using raw blocks or using CSS grid from Bootstrap:

• https://quarto.org/docs/output-formats/page-layout.html#css-grid
• https://quarto.org/docs/authoring/markdown-basics.html#raw-content

Regarding CSS tweaks, you need to play with those in your favourite browser using the developer mode.
Unfortunately, no one can give you a CSS rule out of their mind without any "working" example.

---

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code block (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.