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?

Answer 1

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