Best way to handle overflowing Reveal JS slide

Question

I'm working on a project for which I'm using Reveal JS to present data to the users in the form of slides.

Sometimes I find the text overflowing beyond the viewport.

Due to which the text is not visible as shown in this image

I've tried reducing the text-size dynamically based on the screen height, like so:

var $present_section = $('section.present');
var section_bottom = $present_section.offset().top + $present_section.height();
var allowed_height = $(document).height() - $present_section.offset().top;

if (section_bottom > allowed_height) {
    var cur_font_size = parseInt($present_section.css('font-size'));
    $present_section.css('font-size', cur_font_size - 1);
}

running this code in a recursive loop would adjust the <section>'s font-size to adjust to the document height.

Is there a better way or a plugin to handle this problem without reducing the number of characters in the slide?

score 16 · Answer 1 · edited May 23 '17 at 12:15

Define the CSS class scrollable-slide:

.scrollable-slide {
    height: 800px;
    overflow-y: auto !important;
}

Define listeners which add the above CSS class to the slide if it is too large. For this, you will need jQuery.

function resetSlideScrolling(slide) {
    $(slide).removeClass('scrollable-slide');
}

function handleSlideScrolling(slide) {
    if ($(slide).height() >= 800) {
        $(slide).addClass('scrollable-slide');
    }
}

Reveal.addEventListener('ready', function (event) {
    handleSlideScrolling(event.currentSlide);
});

Reveal.addEventListener('slidechanged', function (event) {
    resetSlideScrolling(event.previousSlide)
    handleSlideScrolling(event.currentSlide);
});

If you want to get rid of the box-shadow and background when it is scrollable, then add these CSS styles:

.scrollable-slide::before {
    background: none !important;
}

.scrollable-slide::after {
    box-shadow: none !important;
}

References:

Reveal JS Website - includes API information
SO - Reveal JS Unable to scroll in the slides - where I got the CSS

My answer below is just a revision of @TahirHassan's which avoids using JQuery and styles scrollbars for dark themes. — Terry Brown, Oct 05 '18 at 15:46

score 8 · Answer 2 · edited Nov 11 '20 at 23:42

8

Here's a JQuery free version of @ThairHassan's answer, this probably doesn't run on old browsers, if you care about that.

This is really just an alternative version of @ThairHassan's answer, I think it would be better to upvote my comment on that answer than this answer.

function resetSlideScrolling(slide) {
    slide.classList.remove('scrollable-slide');
}

function handleSlideScrolling(slide) {
    if (slide.scrollHeight >= 800) {
        slide.classList.add('scrollable-slide');
    }
}

Reveal.addEventListener('ready', function (event) {
    handleSlideScrolling(event.currentSlide);
});

Reveal.addEventListener('slidechanged', function (event) {
    if (event.previousSlide) {
        resetSlideScrolling(event.previousSlide);
    }
    handleSlideScrolling(event.currentSlide);
});

And the CSS, same as above but demo's making a dark scrollbar, in case you're using a dark theme. This also may not work in all browsers.

.scrollable-slide {
    height: 800px;
    overflow-y: auto !important;
}
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
  background-color: #333;
}
::-webkit-scrollbar-corner {
  background-color: #333;
}

edited Nov 11 '20 at 23:42

benmccallum

1,241
12
27

answered Oct 05 '18 at 15:45

Terry Brown

1,300
14
13

Thanks for this, I used your answer which works... except that there's a slight bug. In the resetSlideScolling() function you do .add() when I think it should be .remove() on the classList. The bug manifests in that when going backwards in the presentation, content is placed at the top. Changing to .remove() restores behaviour and scrolling works. – kll Nov 29 '19 at 08:22
1

Nice and clean solution. Worked like a charm. I changed `height: 800px` to `height: 100%;` for larger view of the content. Thanks. – arshovon Feb 21 '20 at 21:21
I prefer this answer as it's more vanilla JavaScript but your code has a bug! Function `resetSlideScrolling` should be removing the class, not adding an additional class. That is, `slide.classList.remove('scrollable-slide');` – abetusk Feb 24 '20 at 05:00
I am not fluent in JS/JQuery/CSS/HTML, but where do I put this code? I tried putting it in reveal.js and reveal.css respectively but adding it to reveal.js seems to have broken it and the slides won't load at all. Can someone point to where this code should go? – Frak Oct 07 '21 at 16:21

Best way to handle overflowing Reveal JS slide

2 Answers2

Linked