Malpositioned item in the left margin. Use of details-summary functionality.

[howardm]

Hi,

I'm trying to use the following functionality in a particular portion of a web page:

<details><summary>Content to be revealed</summary>

Content that is revealed.

</details>

It works, but this screenshot shows the placement of it (truncated) in the left margin

---

---

Is the fact that the code precedes content that includes a ::: {.panel-tabset .column-page} section the cause ?

This problem with the code doesn't occur elsewhere in the document.

Howard

[mcanouil]

Hi,

Could you provide a fully reproducible code example?
Without, it's really hard to reproduce, thus to fix the bug if there is indeed one.

[howardm]

I want to put the details - summary code immediately before this section of code:

### Clinical cases

<br>

A tabset for presentation of a case

This tabset presentation uses a div with the `{.column-page`} class layout mode.

<br>

[After viewing a case, return to the *Clinical Presentation* tab before starting the next one.]{.aside}


#### Case one {#sec-case-1}

<br>

::: {.panel-tabset .column-page}
## Clinical presentation

Pertinent clinical information is provided here.

## Radiography

![](images/CXR.jpg){.lightbox width="40%" fig-align="center"}

## CT

![](images/CT1.jpg){width="35%" fig-align="center"}

## CT Pacsbin

```{=html}
<div style="text-align:center;">

<iframe 
src="https://www.pacsbin.com/c/-ylmpOm7kd?s=6211650ea311df5697970ae9&i=6211650ea311df5697970afa&ww=1665&wc=-490&an=false&header=false&notes=false&overlay=false&scale=0.9" 
style="width: 475px; height: 475px; border: 0;"></iframe>

</div>
 
```
## Explanation

::: columns
::: {.column width="32%"}
![](images/CXR.jpg){.lightbox width="82%"}
:::

::: {.column width="32%"}
![](images/CT1.jpg){width="100%"}
:::

::: {.column width="2%"}
:::

::: {.column width="32%"}
Findings:

-   finding one [&xrarr;]{style="color: red"}
-   finding two
-   finding three
:::

Discussion of the case

::: {.callout-note icon="false"}
## Key Points

-   key point one
-   key point two
:::
:::

## Another Explanation example

::: columns
::: {.column width="65%"}
![](images/CXR.jpg){.lightbox width="62%"}
:::

::: {.column width="34%"}
Findings:

-   finding one  [&xrarr;]{style="color: yellow"}
-   finding two  [&xrarr;]{style="color: blue"}
-   finding three [&xrarr;]{style="color: red"}

Discussion of the case

::: {.callout-note appearance="minimal"}
Remember: Don't forgot this!
:::
:::
:::
:::

(Substitute any image for : CXR and CT1 . I use the lightbox function in places.)

Let me know if more information is needed.

Thanks!

[cscheid]

We need is a full single .qmd file that we can render on our side so we can investigate the output.

[howardm]

Well, I can't duplicate the error again.

But I cannot get the details element to work for a section at all in the index.qmd file.

Here it is: https://www.dropbox.com/sh/6mdqnw4yg7a523g/AABEoByxcFngURBFwWalPi69a?dl=0

I apologize for the confusion. I probably misunderstand the kind of content may be included in a details section.

Thanks.

[cscheid]

(If you are able to share your entire project, then we can attempt to reproduce on our side as well.)

[howardm]

O.K.

Here it is: https://www.dropbox.com/sh/lkgmubyo87mc23g/AAC9pFd8afoLjTl9o1zHItx9a?dl=0

Basically, I want to "collapse" the Cases section so that each web page is not very long. I plan on showing many cases per page.

Maybe that's not the best idea :-)

Howard

[howardm]

@cscheid

The dark background ? No, I just have light and dark themes.

The issue is the same on both.

[dragonstyle]

Just FWIW this is working for me as well:

<details><summary>Content to be revealed</summary>

Content that is revealed.

</details>


::: {.column-page}

::: {.panel-tabset}
## Clinical presentation

Pertinent clinical information is provided here.

## Radiography

![](images/CXR.jpg){.lightbox width="40%" fig-align="center"}

## CT

![](images/CT1.jpg){width="35%" fig-align="center"}

## CT Pacsbin

```{=html}
<div style="text-align:center;">

<iframe 
src="https://www.pacsbin.com/c/-ylmpOm7kd?s=6211650ea311df5697970ae9&i=6211650ea311df5697970afa&ww=1665&wc=-490&an=false&header=false&notes=false&overlay=false&scale=0.9" 
style="width: 475px; height: 475px; border: 0;"></iframe>

</div>
 
```
## Explanation

::: columns
::: {.column width="32%"}
![](images/CXR.jpg){.lightbox width="82%"}
:::

::: {.column width="32%"}
![](images/CT1.jpg){width="100%"}
:::

::: {.column width="2%"}
:::

::: {.column width="32%"}
Findings:

-   finding one [&xrarr;]{style="color: red"}
-   finding two
-   finding three
:::

:::

[howardm]

@dragonstyle

Thanks.

It works for me, too.

But does it work properly when the Content that is revealed consists of a multi-tab Tabset displayed using the .column-page body extension functionality ?

That's the problem I'm encountering.

I'm trying to understand your success :-)

Howard

[dragonstyle]

Yeah that does not appear to work right now. I think is likely because the way our margin layout system works is by forwarding the grid system up through elements, and applying stylse to children to position the various elements as appropriate. In cases like collapsing elements (especially if you'd like the collapse UI to follow the body layout while the content actually follows some wider grid) we need to do special processing.

This is the simplest repro for me:

---
title: "Test"
---


<details>
<summary>Content to be revealed</summary>

:::{.column-page}

hi this is page layout hi this is page layout hi this is page layout hi this is page layout hi this is page layout hi this is page layout hi this is page layout hi this is page layout hi this is page layout hi this is page layout hi this is page layout hi this is page layout

:::
</details>

[howardm]

Thanks for confirming and explaining that.

[howardm]

@cscheid

Sure. Thanks.