You can control the layout of OJS content in a number of ways.

page-layout: full
This example uses page-layout: full to have its contents occupy the entire width of the page:
---
title: "Layout"
format: 
  html: 
    page-layout: full
---
Enclose the inputs in a sidebar panel and the outputs in a tabset panel (click the “Code” button at top right to see the full source code):


viewof bill_length_min = Inputs.range(
  [32, 50], 
  {value: 35, step: 1, label: "Bill length (min):"}
)
viewof islands = Inputs.checkbox(
  ["Torgersen", "Biscoe", "Dream"], 
  { value: ["Torgersen", "Biscoe"], 
    label: "Islands:"
  }
)















PlotData



Plot.rectY(filtered, 
  Plot.binX(
    {y: "count"}, 
    {x: "body_mass_g", fill: "species", thresholds: 20}
  ))
  .plot({
    facet: {
      data: filtered,
      x: "sex",
      y: "species",
      marginRight: 80
    },
    marks: [
      Plot.frame(),
    ]
  }
)








Inputs.table(filtered)








Read and filter the data based on the user’s inputs:

data = FileAttachment("palmer-penguins.csv").csv({typed: true})
filtered = data.filter(function(penguin) {
  return bill_length_min < penguin.bill_length_mm &&
         islands.includes(penguin.island);
})

















width and layoutWidth: fine-grained layout tracking
Like ObservableHQ, ojs cells support the reactive width which tracks the clientWidth of the main HTML element.

width





In addition, if you need the widths of specific parts of the layout, use the CSS class ojs-track-layout in a div. Quarto’s OJS runtime tracks all such divs in layoutWidth. In this example, the tabset above has id penguins-tabset, and you can see its clientWidth reactively below. If this webpage is sufficiently wide, the sidebar will take up some of the space and the width of the resulting tabset will be smaller:

layoutWidth







 




Source Code
---
title: "Layout"
format:
  html:
    echo: false
    code-tools: true
    page-layout: full
    toc: false
---

You can control the layout of OJS content in a number of ways.

## `page-layout: full`

This example uses `page-layout: full` to have its contents occupy the entire width of the page:

``` yaml
---
title: "Layout"
format: 
  html: 
    page-layout: full
---
```

Enclose the inputs in a sidebar panel and the outputs in a tabset panel (click the "Code" button at top right to see the full source code):

```{ojs}
//| panel: sidebar
viewof bill_length_min = Inputs.range(
  [32, 50], 
  {value: 35, step: 1, label: "Bill length (min):"}
)
viewof islands = Inputs.checkbox(
  ["Torgersen", "Biscoe", "Dream"], 
  { value: ["Torgersen", "Biscoe"], 
    label: "Islands:"
  }
)
```

::: {#penguins-tabset .panel-tabset .ojs-track-layout}
## Plot

```{ojs}
Plot.rectY(filtered, 
  Plot.binX(
    {y: "count"}, 
    {x: "body_mass_g", fill: "species", thresholds: 20}
  ))
  .plot({
    facet: {
      data: filtered,
      x: "sex",
      y: "species",
      marginRight: 80
    },
    marks: [
      Plot.frame(),
    ]
  }
)
```

## Data

```{ojs}
Inputs.table(filtered)
```
:::

Read and filter the data based on the user's inputs:

```{ojs}
//| echo: true
data = FileAttachment("palmer-penguins.csv").csv({typed: true})
filtered = data.filter(function(penguin) {
  return bill_length_min < penguin.bill_length_mm &&
         islands.includes(penguin.island);
})
```

## `width` and `layoutWidth`: fine-grained layout tracking

Like ObservableHQ, `ojs` cells support the reactive `width` which tracks the `clientWidth` of the main HTML element. 

```{ojs}
//| echo: true
width
```

In addition, if you need the widths of specific parts of the layout, use the CSS class `ojs-track-layout` in a div. Quarto's OJS runtime tracks all such divs in `layoutWidth`. In this example, the tabset above has id `penguins-tabset`, and you can see its `clientWidth` reactively below. If this webpage is sufficiently wide, the sidebar will take up some of the space and the width of the resulting tabset will be smaller:

```{ojs}
//| echo: true
layoutWidth
```