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 http://i.stack.imgur.com/TWOaO.png

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

Answer 2

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.add('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;
}