CODEWITHSUNDEEP
twitter-bootstrap
user1899362
user1899362

Reputation: 83

input field in horizontal form in bootstrap modal overflows out of bounds

Simple horizontal form, the input form fields overflow out of bounds when display size is large. As you shrink the display, it seems to fall back into bounds. How do I ensure it stays within bounds?

Also, I cannot seem to get the label and field to line up next to each other.

See my fiddle http://jsfiddle.net/5bkncazz/

<button type="button" id="btn-request-endorsement" class="btn btn-default" aria-hidden="true" data-toggle="modal" data-target="#modal-request-endorsement">Request Endorsement</button>
  <div id="modal-request-endorsement" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h4 class="modal-title">Send an email requesting endorsement</h4>
  </div>
  <div class="modal-body form-horizontal">

    <div id="endorsement-form-container" class="container">

      <form class="form-horizontal" role="form">
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email" placeholder="Enter email of endorser" />
          <label for="msg">Message:</label>
          <input type="text" class="form-control" id="msg" placeholder="Enter a personalized message" />
        </div>
        <button type="submit" class="btn btn-default">Send Email</button>

      </form>

    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Upvotes: 4

Views: 4197

Answers (2)

jasminejeane
jasminejeane

Reputation: 496

Removing the container class from within the modal-body class section fixed the issue for me.

Upvotes: 4

My Stack Overfloweth
My Stack Overfloweth

Reputation: 4954

This piece of CSS appears to be what causes the fields to break out of the modal bounds:

@media (min-width: 768px)
.container {
    width: 750px;
}

This affects the div id="endorsement-form-container" class="container" element. Are you able to override this with your own width:inherit style or something similar?

Label and Field Alignment

This is caused by the form controls having display:block; by default in bootstrap. You can override this by surrounding the label and field with a div that will act as a container for each form field. Then add in the following CSS to override behavior. A set width is also added to the labels here to make things look consistent:

label {
  width:70px;
}

.form-control {
  display:inline-block;
  width:80%;
}

JSFiddle as an example: http://jsfiddle.net/5bkncazz/8/

Upvotes: 4

Related Questions