Observable and article layout: is it possible to use it?

[cscheid]

Discussed in #4216

^{Originally posted by aborruso February 4, 2023}
Hi,
I have the below sample code.

```{ojs}
//| echo: false
//| column: page
data = FileAttachment("input.csv").csv({ typed: true })
Inputs.table(data)
```

I would like to apply Page Column, but it seems not work for observable.

Thank you

[cscheid]

Thanks! We can repro it. We'll fix on 1.4. In the meantime, here's a workaround:

::: column-page

```{ojs}
//| echo: false
data = FileAttachment("input.csv").csv({ typed: true })
Inputs.table(data)
```

:::

[aborruso]

Thanks! We can repro it. We'll fix on 1.4. In the meantime, here's a workaround:

Thank you for all

[petrbouchal]

Possibly with a related cause: some Observable input elements do not follow the column layout inside panel: input blocks.

---
title: "input-col-test"
format: html
execute: 
  echo: false
---

# Heading

```{ojs}
//| panel: input
//| layout-ncol: 2
viewof is_a = Inputs.toggle({label: "A"})
viewof is_b = Inputs.toggle({label: "B"})
```

Wrapping it into :::{.panel-input} etc. does not help in this case.

It may be just a case of some elements iteracting - I've observed this with toggles. The alignment of the tickboxes against text vertically and spacing horizontally also seems odd - see below, although here the column layout is observed.

---
title: "input-col-test"
format: html
execute: 
  echo: false
---

# Heading

```{ojs}
//| panel: input
//| layout-ncol: 2
viewof is_b = Inputs.checkbox(["one", "two"], {label: "B"})
viewof is_a = Inputs.toggle({label: "A"})
```

Happy to file as a separate issue(s) if needed.

[cscheid]

Yes, a separate issue would be appreciated. I'll note that it'll be unfortunately hard for us to nail these layouts perfectly in general, because Observable creates the DOM elements at runtime, and some of our layout decisions happen at document render time. Ideally, we would redesign the entire system to work identically irrespective of when the DOM elements are added, but this is pretty tricky to get right!

[petrbouchal]

Thanks @cscheid - now filed as #4587. I am always amazed at how you make the layers of components work together in Quarto and understand it may not be possible make everything gel perfectly.