Create a box with scrolling content without using iframe

Bootstrap Studio Help
1

Is there a way to create a box, column, popup or table whose content (such as a very long list or text) can be scrolled, without using an iframe? (Which means also without needing/using the browser window scrollbar)

Sid

2

Not sure if you mean auto scrolling content, or allowing the user to use a scrollbar.

If it's the latter, you have a DIV or Paragraph etc... with set width/height and use the CSS properties of overflow: auto; and it you want the text to be on a single line and scroll left, right in the box you add the property white-space: nowrap;

HTML

<div class="hrz-txt-scroll">
    < p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.< /p>
</div>

CSS

.hrz-txt-scroll {
  width: 400px;
  height: 5rem;
  padding: 15px;
  overflow: auto;
  white-space: nowrap;
}

.hrz-txt-scroll p {
    margin-bottom: 0;
}

Adds horizontal scrollbar when there is more content than it's parent container can hold. If it has less content then the scrollbar effectively gets hidden. Get rid of the white-space: nowrap; if you want vertical scrolling instead.

Saj

3

Thank you for a reply. :)

My apologies for not being clear: want a scroll bar in the table/box to scroll vertically to show content that does not fit the display area.

It would be nice if bootstrap studio had a vertically scroll box you could just drop into the page.

Sid

4

There is. https://getbootstrap.com/docs/4.1/content/tables/#responsive-tables

There is already a Table component that will do this for you. In the Components pane (top/left Studio tab) type in Table. Drag/Drop that component into your project for a responsive table that when there is more table content than visible space, it will create scrollbar(s) for you to scroll the content.

Saj

5

Thanks. Missed that - though I was thinking more of a box than a table, But a table with no border width would probably do the trick :)

Thanks again

Sid.

6

The Table component is inside a box

<div class="table-responsive"> // this DIV creates the BOX 
  < table class="table">
    ...
  < /table>
</div>

Just like in my first response post the DIV creates the BOX effect it's the CSS coding that makes it function like you're wanting and I gave you that example so you can try it out in your own project.

What goes in the BOX is irrelevant whether it's another DIV or Table or Paragraph or Image etc.. The parent DIV that has the CSS like my example is what causes the scrolling box style. You just have to define width/height to create a defined area content should fit in. Then add overflow: auto to so that if any content exceeds the defined space it will create scrollbars for scrolling to see the rest of the content. https://www.w3schools.com/cssref/pr_pos_overflow.asp

I'm glad you were able to work something out though :)

Saj