Bootstrap modal window much bigger

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

5/13/2014

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/

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .modal-dialog{
      width:90%;
     
    }
    </style>
</head>
<body>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>stuff</p>
        <p>stuff</p>
        <p>stuff</p>
        <p>stuff</p>
        <p>stuff</p>
        <p>stuff</p>
        <p>stuff</p>
        <p>stuff</p>
        <p>stuff</p>
        <p>stuff</p>
        <p>stuff</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Open in new window

gdemaria

5/13/2014

ASKER

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...

ASKER CERTIFIED SOLUTION

Scott Fell

5/13/2014

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

gdemaria

5/13/2014

ASKER

Thanks for the help! The only differences is that I put the max height and scroll on the body of the modal and it's just right.

<style>
.modal.modal-wide .modal-dialog {
width: 90%;
}
.modal-wide .modal-body {
overflow-y: auto;
max-height:400px;
}
</style>

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.

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!

Walt Forbes