Link to home
Get AccessLog in
Avatar of gdemaria
gdemariaFlag for United States of America

asked on

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?
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

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

Avatar of gdemaria

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
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This content is only available to members.
To access this content, you must be a member of Experts Exchange.
Get Access
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.