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

Reputation: 727

Issues with image inside Bootstrap modal

http://codepen.io/anon/pen/jWGXKJ

<a data-toggle="modal" href="#modal" class="btn btn-primary">Open</a>
<div id="modal" 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/aZO5Kol.jpg"/>
      </div>
    </div>
  </div>
</div>
  1. How do I get the modal to expand its width to fit its containing image without having to calculate and use the image width in pixels.
  2. How do I get a horizontal scrollbar, on the window itself, when the modal extends horizontally beyond the current view?

Upvotes: 2

Views: 3301

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

For all your questions, RTFM:

How do I get the modal to expand its width to fit its containing image without having to calculate and use the image width in pixels.

The class .modal-dialog. It has a default width of 600px. Make it this way:

.modal {
  text-align: center;       /* Center the modal window. */
}

.modal-dialog {
  width: auto;
  margin: 30px auto;
  display: inline-block;
}

How do I get a horizontal scroll bar when the modal extends horizontally beyond the current view?

This will make sure that, if the contents go out of the modal window range, it will show scrollbars.

.modal-dialog {
  overflow: auto;
}

Upvotes: 1

Bill
Bill

Reputation: 162

1) No need for pixels You can do it with percentage %

img{
width:100%;
}

Upvotes: 2

Related Questions