I am looking to make some lengthy text contained into a div
where the text can be viewed by scrolling up or down.
Right now the "description" text is rendered like so <%= @pin.description.html_safe %>
and is inside a <div class="panel-body>
(I'm using Bootstrap).
Making a div vertically scrollable is easy by using CSS overflow property. There are different values in overflow property. For example: overflow:auto; and the axis hiding procedure like overflow-x:hidden; and overflow-y:auto;.
To fit all the text inside the div, the single-direction scrolling method will be used. You can apply it by placing the overflow-y:scroll in the id growth inside the style tag. Notice the scroll bar on the right side of the div .
Give your div
a height and set overflow: scroll
#elementId{
height: 200px;
overflow: scroll;
}
If you only want it to scroll up/down and not left/right use:
overflow-y: scroll;
JSFIDDLE
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With