I am showing a list of items in a table, when clicking one of the items, I would like to have a pop-up open with a significant amount of detail information in it. The bootstrap modal window is not large enough and I am finding it very hard to find a way to make it big. I would like to have it be say 90% of the page width and height, but with the header and footer still only a line at the top and bottom. When resizing the window, the pop-up should resize as well. I am going to put tabs in it with a lot of detail information.
Having a lot of trouble finding this, perhaps the answer is not using the modal div available with bootstrap? Can someone suggest a way to do this?
CSSJavaScriptWeb Development Software
Last Comment
gdemaria
8/22/2022 - Mon
Scott Fell
The height is based on content. You can adjust the width. Take a look at my css and sample I used from the getbootstrap site. http://jsbin.com/surur/1/
Super, that works very well for the width and I do see how the height expands as needed.
However, if I add significant content, the height of the modal can go below the screen height so the page has to scroll. Is there a way to set the modal's body height so that the modal will not be taller than the visible screen and will have a scroll bar inside the modal body instead?
I'm thinking this would involve max-height and an over flow? Playing with it...
I prefer not to open a new page because that would be a lot of navigating back and forth. The idea is that the user can choose an item on a list, examine the detail and then go to the next item or close and return to the list.
Open in new window