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

Allow scrolling #230

Closed
lucasrodwell opened this issue May 5, 2023 · 7 comments
Closed

Allow scrolling #230

lucasrodwell opened this issue May 5, 2023 · 7 comments
Labels
enhancement New feature or request

Comments

@lucasrodwell
Copy link

I often want to interactively add to presentations with my audience, which means that I cannot be sure not to overflow on a slide, and need to be able to scroll. Sometimes I have longer texts that I don't want to split up either, such as embeds, where it would be very helpful to be able to scroll.

I have tried solving this with css snippets, but this solution doesn't work, as with advanced slides there is a problem with long texts being clipped above the presentation grid when using overflow-y. I think this is the reason.

I have tried to adapt the css to no avail. If it is not possible for a css snippet solution, a toggle to allow scrolling would be of great help to me.

@lucasrodwell lucasrodwell added the enhancement New feature or request label May 5, 2023
@damywise
Copy link

damywise commented Dec 3, 2023

I added this at the end of scrollable.css:

.present > div,
.past > div,
.future > div
{
    display: block !important;
}

It works, at the very least.

@damywise
Copy link

damywise commented Dec 3, 2023

Ah, also you might want to remove

    overflow: auto !important;

from scrollable.css, that makes it scrollable horizontally which shouldn't be

@lucasrodwell
Copy link
Author

Is your scrollable.css from here?

@damywise
Copy link

damywise commented Dec 3, 2023

Ah yes it is correct. Sorry about that, I forgot to mention it.

@lucasrodwell
Copy link
Author

Unfortunately, I can't get it to work... To double-check, the whole snippet is the following ???

.reveal:not(.overview) .slides {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
}

.reveal:not(.overview) .slides::-webkit-scrollbar {
    display: none;
}

.reveal:not(.overview) .slides .past, .reveal:not(.overview) .slides .future {
    height: 0;
}

.present > div,
.past > div,
.future > div
{
    display: block !important;
}

@damywise
Copy link

damywise commented Dec 3, 2023

Yes that should be correct.
I tried yours and it works.
Have you added the css property in the md?

@lucasrodwell
Copy link
Author

Thanks, I needed the full path for it to work:

---
css:
  - .obsidian/snippets/scrollable.css
---

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

No branches or pull requests

2 participants