CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3bootstrap-modal
Gary In
Gary In

Reputation: 727

Image with overflow inside bootstrap modal

I have this so far: codepen

html:

<a data-toggle="modal" href="#tallModal" class="btn btn-primary">Wide, Tall Content</a>


<div id="tallModal" class="modal modal-wide fade">   <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">Modal title</h4>
      </div>
      <div class="modal-body">
        <img src="http://i.imgur.com/ikqKRG4.jpg">
      </div>
    </div>
    <!-- /.modal-content -->   </div>   <!-- /.modal-dialog --> </div> <!-- /.modal -->

css:

.modal-dialog {
  height: 100%;
  width: 200px;
  max-width: 100%;
  margin: 0px auto;
  overflow-y: auto;
}

@media (min-width: 768px) .modal-dialog {
  margin: 0px auto;
}

.modal-body {
  padding: 0;
}

I want the modal to overflow both horizontally and vertically. However, I have some issues with the scrollbar covering up the image - thus I need to set the width to be the width of the image + the width of the scrollbar. How do I avoid this?

I don't want the image to be scaled so it must be in a div with overflow and I also want the width of the modal to be the width of the image itself without having to specify the width of the image.

Upvotes: 0

Views: 3283

Answers (2)

Marc Roussel
Marc Roussel

Reputation: 499

Let me know if this little css hack works for you :

.modal-body {
    max-height: calc(100vh - 210px);
    overflow: auto;
}

Here's a fork of your own CodePen : https://codepen.io/geardoom3/pen/KvXdvY

Upvotes: 1

Varun Sharma
Varun Sharma

Reputation: 4842

Put img-responsive class

 <a data-toggle="modal" href="#tallModal" class="btn btn-primary">Wide, Tall Content</a>


<div id="tallModal" class="modal modal-wide fade">   <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">Modal title</h4>
      </div>
      <div class="modal-body">
        <img src="http://i.imgur.com/ikqKRG4.jpg" class="img-responsive">
      </div>
    </div>

Set width and height as if you want.

Upvotes: 1

Related Questions