We help IT Professionals succeed at work.

Bootstrap modal window much bigger

8,432 Views
Last Modified: 2014-05-13
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?
Comment
Watch Question

Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
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

CERTIFIED EXPERT

Author

Commented:
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...
Developer
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT

Author

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

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.