Scrollable post content

This is a theme component that will allow you to add scrollable sections in posts with one click!

Repository link
https://github.com/discourse/Scrollable-post-content

Preview:
Discourse Theme Creator

After clicking “view theme” navigate to the “Scrollable post content” topic in the #General category


Samples

Desktop

Mobile

Composer button

Settings

This theme comes with two settings:

  1. Content height

    this allows you to set the desired height of the scrollable content in pixels. It defaults to 300. If you want to change it, just add a number, no need for units.

  2. Scrollable content button icon

    this allows you to set the icon used for the scrollable content button in the composer.

Translations

The component comes with one string that you can translate.

insert_scrollable_content: Insert scrollable content

This acts as the label for the composer button.

How do I use it?

There are two ways to add scrollable content.

  1. highlight the content you want to target, then click the button in the composer.
  2. click the composer button and start typing / paste content.

Either way works so it’s up to you.

How do I install this theme component?

Follow the theme installation guide and add the theme component to your active themes.

If you’re new to Discourse themes, you can learn more about them here.

39 Likes

Johani, classic Johani, never fails to strike me with awe.

I hope to be like you one day, Sir.

9 Likes

This is great. I’ve been using [details] to hide long sections of content like transcripts of video recordings, but this may be a better fit.

How does it work for email notifications? Is the entire content included in the email? Or is it somehow trimmed according the the maximum height?

5 Likes

Themes are limited to client-side modifications, so they won’t affect emails.

The fact that e-mails need inline CSS, make they very hard to target too.

5 Likes

Is there a way to make it so that content still appears scrollable when quoted? I think it ignores the scrolling when in quote tags.

1 Like

I’m getting errors since updating to 2.3.0.beta10:

TypeError: Cannot set property 'scrollable_content_text' of undefined
2 Likes

Hey, @Johani. I’m getting the same error with a site that I just set up as well.

You can check it out here: https://discourse.kaplanlifecareplan.com/

Hi @pfaffman, I pushed a potential fix for the console error, please pull an update and try this again.

5 Likes

Looks like that did it! Thanks a million!

I guess @team is getting big enough that I can’t reliably guess who to ping. Thanks, @pmusaraj!

3 Likes

This component is now making a warning:

decorateCooked should be supplied with an id option to avoid memory leaks.

2 Likes