Scrollable Code Blocks? #2433

Closed
opened 2026-02-05 04:07:31 +03:00 by OVERLORD · 4 comments
Owner

Originally created by @geektbee on GitHub (Oct 13, 2021).

I saw an issue where there were undesired scrollbars on code blocks (that's now fixed).

We're looking in the documentation, but can't find, for a way to enable scrollbars at a certain point. Like, maybe when the code goes over 20 lines, bam, institute a scrollbar.
Is this possible is the current state and we simply don't know how to find the documentation?
Or should this be a feature request, instead?

Thanks!

Originally created by @geektbee on GitHub (Oct 13, 2021). I saw an issue where there were undesired scrollbars on code blocks (that's now fixed). We're looking in the documentation, but can't find, for a way to enable scrollbars at a certain point. Like, maybe when the code goes over 20 lines, bam, institute a scrollbar. Is this possible is the current state and we simply don't know how to find the documentation? Or should this be a feature request, instead? Thanks!
Author
Owner

@ssddanbrown commented on GitHub (Oct 13, 2021):

Hi @geektbee,

Adding something like this to your "Custom HTML Head Content" setting should get you most of the way there:

<style>
.CodeMirror-scroll {
    max-height: 300px;
}
</style>

Note: Adjust the 300px up or down to suit your need.

We don't support limited-heights on code blocks officially, so there may be potential side-affects or support breaks in the future, but the above may do what you need.

@ssddanbrown commented on GitHub (Oct 13, 2021): Hi @geektbee, Adding something like this to your "Custom HTML Head Content" setting should get you most of the way there: ```html <style> .CodeMirror-scroll { max-height: 300px; } </style> ``` **_Note: Adjust the `300px` up or down to suit your need._** We don't support limited-heights on code blocks officially, so there may be potential side-affects or support breaks in the future, but the above may do what you need.
Author
Owner

@geektbee commented on GitHub (Oct 13, 2021):

Your code meets our goal!
Thank you so much for that!

@geektbee commented on GitHub (Oct 13, 2021): Your code meets our goal! Thank you so much for that!
Author
Owner

@mlipok commented on GitHub (Oct 13, 2021):

Adding something like this to your "Custom HTML Head Content"

I'm new to BookStack
Please add some screenshot.

@mlipok commented on GitHub (Oct 13, 2021): > Adding something like this to your "Custom HTML Head Content" I'm new to BookStack Please add some screenshot.
Author
Owner

@geektbee commented on GitHub (Oct 14, 2021):

Adding something like this to your "Custom HTML Head Content"

I'm new to BookStack Please add some screenshot.

Sure thing:

image

@geektbee commented on GitHub (Oct 14, 2021): > > Adding something like this to your "Custom HTML Head Content" > > I'm new to BookStack Please add some screenshot. Sure thing: ![image](https://user-images.githubusercontent.com/16610859/137223929-5e66bf94-a095-4bd0-86d8-9665afec2c81.png)
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#2433