How to fix position of body when using margin? #10286

Hrrsmjd · 2024-07-13T14:28:13Z

Hrrsmjd
Jul 13, 2024

Description

I am creating a personal blog and would like to use the margin for citations and references. When I include components in the margin, the body shifts left. How can I fix the position of the body so that it doesn't shift when moving between pages with and without margins? I have tried editing the page layout options in the sitewide _quarto.yml file and in the .qmd file (see below).

_quarto.yml:

project:
  type: website
website:
  title: "temp"
format:
  html:
    grid: 
      margin-width: 350px

test.qmd:

---
title: "test"
format:
  html:
    grid: 
      margin-width: 350px
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus nunc non ante dapibus, ac hendrerit magna gravida. Ut viverra porttitor mattis. Sed sed magna sed velit varius rhoncus eu ut erat. Aenean eget justo nisl. Nulla tincidunt vulputate enim, sit amet vestibulum lectus. Aliquam ultricies, lacus ac ultricies aliquet, ex metus posuere lorem, nec imperdiet nunc massa in libero. Aenean facilisis nibh et massa feugiat, vitae gravida erat tincidunt. Fusce odio velit, euismod in dictum in, dignissim sed orci. Nam maximus, urna at mattis sollicitudin, lorem sapien pulvinar neque, ut ultrices mi risus nec urna. Fusce venenatis vulputate mauris sed lobortis. Donec auctor mauris vel nulla tristique posuere. Quisque gravida porta finibus. Mauris aliquet porttitor massa, sed euismod lacus euismod a.
::: column-margin <!-- If I comment this out, it unshifts. -->
test 
:::

mcanouil · 2024-07-21T14:34:52Z

mcanouil
Jul 21, 2024
Collaborator

Why are you setting the margin-width at different levels?
The grid customisation is a global setting, see https://quarto.org/docs/output-formats/page-layout.html#grid-customization.

Also, please read carefully the documentation:

The values of these variables don’t directly specify the display width of the corresponding component, instead they specify a maximum base value. The maximum values are scaled to create minimum values, and together they are used to compute the size and position of each component across different layout types (fixed vs. floating), responsive sizes (large screen vs. mobile size), and page contents (margin vs. no margin content).

I also cannot reproduce your issue, see fully reproducible examples below using 1.6.

Which Quarto version are you using?

quarto create project website
Edit _quarto.yml

project:
  type: website

website:
  title: "Website"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true
    grid: 
      margin-width: 350px

Edit index.qmd

---
title: "Website"
---

{{< lipsum 1 >}}

{{< lipsum 1 >}}

::: {.column-margin}
{{< lipsum 1 >}}
:::

8 replies

mcanouil Jul 24, 2024
Collaborator

I don't have anything shifting using Quarto 1.4, or 1.5 or 1.6.
Note that the current stable version is 1.5.

Screen.Recording.2024-07-24.at.14.42.13.mov

Using the latest 1.4 stable (which is 1.4.557).

Screen.Recording.2024-07-24.at.14.50.38.mov

mcanouil Jul 24, 2024
Collaborator

@Hrrsmjd Could you make sure your example actually reproduce the issue?
For instance 1.4 does not have the lipsum shortcode so your "new" example was clearly not tested on your side or the information provided are wrong.

Please be mindful of our time and thank you for your cooperation.

Hrrsmjd Jul 24, 2024
Author

@Hrrsmjd Could you make sure your example actually reproduce the issue? For instance 1.4 does not have the lipsum shortcode so your "new" example was clearly not tested on your side or the information provided are wrong.

Please be mindful of our time and thank you for your cooperation.

Note that I commented out toc: true.

In my code, lipsum was installed as an extension, but it doesn't matter—including a margin with or without lipsum, or just {{< lipsum 1 >}} shifts the page.

Without lipsum extension:

mcanouil Jul 24, 2024
Collaborator

Now I can reproduce even on latest.

And no need to have a website.

Input

Output

---
title: "Website"
format:
  html:
    grid: 
      margin-width: 350px
---

{{< lipsum 1 >}}

{{< lipsum 1 >}}

::: {.column-margin}
{{< lipsum 1 >}}
:::

<body class="fullcontent">
  <div id="quarto-content" class="page-columns page-rows-contents page-layout-article">
    <main class="content" id="quarto-document-content">
      <header id="title-block-header" class="quarto-title-block default">
        <div class="quarto-title">
          <h1 class="title">Website</h1>
        </div>
        <div class="quarto-title-meta">
        </div>
      </header>
      <p>Duis ornare ex ac iaculis pretium. Maecenas sagittis odio id erat pharetra, sit amet consectetur quam
        sollicitudin. Vivamus pharetra quam purus, nec sagittis risus pretium at. Nullam feugiat, turpis ac accumsan
        interdum, sem tellus blandit neque, id vulputate diam quam semper nisl. Donec sit amet enim at neque porttitor
        aliquet. Phasellus facilisis nulla eget placerat eleifend. Vestibulum non egestas eros, eget lobortis ipsum.
        Nulla rutrum massa eget enim aliquam, id porttitor erat luctus. Nunc sagittis quis eros eu sagittis.
        Pellentesque dictum, erat at pellentesque sollicitudin, justo augue pulvinar metus, quis rutrum est mi nec
        felis. Vestibulum efficitur mi lorem, at elementum purus tincidunt a. Aliquam finibus enim magna, vitae
        pellentesque erat faucibus at. Nulla mauris tellus, imperdiet id lobortis et, dignissim condimentum ipsum. Morbi
        nulla orci, varius at aliquet sed, facilisis id tortor. Donec ut urna nisi.</p>
      <p>Etiam quis tortor luctus, pellentesque ante a, finibus dolor. Phasellus in nibh et magna pulvinar malesuada. Ut
        nisl ex, sagittis at sollicitudin et, sollicitudin id nunc. In id porta urna. Proin porta dolor dolor, vel
        dapibus nisi lacinia in. Pellentesque ante mauris, ornare non euismod a, fermentum ut sapien. Proin sed vehicula
        enim. Aliquam tortor odio, vestibulum vitae odio in, tempor molestie justo. Praesent maximus lacus nec leo
        maximus blandit.</p>
    </main>
  </div>
</body>

Input

Output

---
title: "Website"
format:
  html:
    toc: true
    grid: 
      margin-width: 350px
---

{{< lipsum 1 >}}

{{< lipsum 1 >}}

::: {.column-margin}
{{< lipsum 1 >}}
:::

<body>
  <div id="quarto-content" class="page-columns page-rows-contents page-layout-article">
    <div id="quarto-margin-sidebar" class="sidebar margin-sidebar zindex-bottom">
    </div>
    <main class="content" id="quarto-document-content">
      <header id="title-block-header" class="quarto-title-block default">
        <div class="quarto-title">
          <h1 class="title">Website</h1>
        </div>
        <div class="quarto-title-meta">
        </div>
      </header>
      <p>Ut ut condimentum augue, nec eleifend nisl. Sed facilisis egestas odio ac pretium. Pellentesque consequat magna
        sed venenatis sagittis. Vivamus feugiat lobortis magna vitae accumsan. Pellentesque euismod malesuada hendrerit.
        Ut non mauris non arcu condimentum sodales vitae vitae dolor. Nullam dapibus, velit eget lacinia rutrum, ipsum
        justo malesuada odio, et lobortis sapien magna vel lacus. Nulla purus neque, hendrerit non malesuada eget,
        mattis vel erat. Suspendisse potenti.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis posuere ligula sit amet lacinia. Duis
        dignissim pellentesque magna, rhoncus congue sapien finibus mollis. Ut eu sem laoreet, vehicula ipsum in,
        convallis erat. Vestibulum magna sem, blandit pulvinar augue sit amet, auctor malesuada sapien. Nullam faucibus
        leo eget eros hendrerit, non laoreet ipsum lacinia. Curabitur cursus diam elit, non tempus ante volutpat a.
        Quisque hendrerit blandit purus non fringilla. Integer sit amet elit viverra ante dapibus semper. Vestibulum
        viverra rutrum enim, at luctus enim posuere eu. Orci varius natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus.</p>
    </main>
  </div>
</body>

The margin is not kept when there is no content.
having toc: true even if there is nothing to display in it allows to keep the margin space untouch by adding the following div:

<div id="quarto-margin-sidebar" class="sidebar margin-sidebar zindex-bottom">
</div>

Now, I am not sure what is the correct way to handle empty margin/sidebar in the context of the various layout options.

CC @cderv @cscheid

mcanouil Jul 24, 2024
Collaborator

@Hrrsmjd

Workaround: "initialise" the margin either by toc: true or by adding an empty ::: {.column-margin}.

Screen.Recording.2024-07-24.at.15.19.06.mov

How to fix position of body when using margin? #10286

Uh oh!

Uh oh!

Hrrsmjd Jul 13, 2024

Description

Replies: 1 comment · 8 replies

Uh oh!

Uh oh!

mcanouil Jul 21, 2024 Collaborator

Uh oh!

mcanouil Jul 24, 2024 Collaborator

Uh oh!

mcanouil Jul 24, 2024 Collaborator

Uh oh!

Uh oh!

Hrrsmjd Jul 24, 2024 Author

Uh oh!

Uh oh!

mcanouil Jul 24, 2024 Collaborator

Uh oh!

Uh oh!

mcanouil Jul 24, 2024 Collaborator

Hrrsmjd
Jul 13, 2024

Replies: 1 comment 8 replies

mcanouil
Jul 21, 2024
Collaborator

mcanouil Jul 24, 2024
Collaborator

mcanouil Jul 24, 2024
Collaborator

Hrrsmjd Jul 24, 2024
Author

mcanouil Jul 24, 2024
Collaborator

mcanouil Jul 24, 2024
Collaborator