How to add a scroll to bootbox dialog?

Question

I have searched the web and I have failed to find a solution to adding a scroll to a bootbox custom dialog. Is there anyway I could get it to work. I need a vertical scroll.

Is this possible?

please add some sample code to your question, illustrating where you are stuck — Noam Hacker, Mar 13 '16 at 18:06

score 8 · Accepted Answer · answered Mar 13 '16 at 18:27

8

Bootbox uses a css class named modal-body for the body of its dialog; so you can override the class to make it scroll-able. For instance:

.modal-body {
    height: 100px;
    overflow-y: scroll;
}

answered Mar 13 '16 at 18:27

Abbas Amiri

3,074
1
23
23

@kyadondotimothy, in a `style` tag in your page or in a css file that must be referenced in your page. – Abbas Amiri Mar 14 '16 at 08:01
1

I found this to be slightly better when your dialog can contain different things: .modal-body { max-height: 500px; overflow-y: auto; } That sets the maximum height, after which the scrollbar is added. So if you have little content, no bar and height adjusts to fix. If you have lots of content, you get a scrollbar and the height doesn't get too crazy high. – Tundey Apr 25 '18 at 14:46
1

@Tundey your answer really help me in my project. I think you should post it as a different answer. – maximran Dec 28 '18 at 01:42

score 3 · Answer 2 · answered Jan 08 '19 at 19:20

If you want your dialog to expand and add scrollbars based on the size of your content, use this:

.modal-body { 
   max-height: 500px; 
   overflow-y: auto; 
}

That sets the maximum height, after which the scrollbar is added. So if you have little content, no bar and height adjusts to fix. If you have lots of content, you get a scrollbar and the height doesn't get too crazy high.

How to add a scroll to bootbox dialog?

2 Answers2