Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to obtain padding in multi-col layout #8

Open
n8craig opened this issue Aug 29, 2022 · 1 comment
Open

How to obtain padding in multi-col layout #8

n8craig opened this issue Aug 29, 2022 · 1 comment

Comments

@n8craig
Copy link

n8craig commented Aug 29, 2022

I asked this question over at the Quarto discussion, but figured I would replicate it here now that I have a clearer repro. I would be most grateful for any insight on how to get padding between images in a multi-col layout similar to how this looks without lightbox.

In the first case the images are shown without lightbox and have padding. In the second case, lightbox is activated and padding is gone. I'd like to add padding as in the first instance, but do not see arguments within the filter. The only difference between the two is that lightbox is commented out in the first instance and active in the second. Any thoughts?

I suspect for most use cases, some space between images would be the preferred default behavior.

No lightbox, has padding between images. This is the desired outcome.

---
title: Example Lightbox Document
# filters:
#   - lightbox
# lightbox: auto
---

::: {layout-ncol=3}
![Aquinnah](https://quarto-ext.github.io/lightbox/images/mv-1.jpg){group="elsewhere"
description="The waves break off the coast of Aquinnah on a beautiful summer day."}

![Oak Bluffs](https://quarto-ext.github.io/lightbox/images/mv-3.jpg){group="elsewhere"
description="Oak Bluffs is famous for its Gingerbread cottages, busy town center, and party like atmosphere."}

![Vineyard lighthouse](https://quarto-ext.github.io/lightbox/images/mv-2.jpg){group="elsewhere"
description="The Edgartown Lighthouse is a short walk from downtown and has beautiful views over the entrance to Edgartown Harbor."}
:::

image

Lightbox activated, no padding between images. This is not the desired outcome. How to include padding?

---
title: Example Lightbox Document
filters:
  - lightbox
lightbox: auto
---

::: {layout-ncol=3}
![Aquinnah](https://quarto-ext.github.io/lightbox/images/mv-1.jpg){group="elsewhere"
description="The waves break off the coast of Aquinnah on a beautiful summer day."}

![Oak Bluffs](https://quarto-ext.github.io/lightbox/images/mv-3.jpg){group="elsewhere"
description="Oak Bluffs is famous for its Gingerbread cottages, busy town center, and party like atmosphere."}

![Vineyard lighthouse](https://quarto-ext.github.io/lightbox/images/mv-2.jpg){group="elsewhere"
description="The Edgartown Lighthouse is a short walk from downtown and has beautiful views over the entrance to Edgartown Harbor."}
:::

image

@dragonstyle
Copy link
Contributor

dragonstyle commented Aug 29, 2022

See quarto-dev/quarto-cli#2133 (reply in thread) which outlines unexpectedly different HTML. Note that the div with quarto-layout-cell containing the element is missing and so margin-right that is placed upon the cells isn't present.

Would be good to continue supporting marginless layout.

^ Notes to self for when fixing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants