Twitter Bootstrap - form in Modal formatting - ASP.NET

I have a form in a modal that formats perfectly if the main window is not too wide (with the labels above the fields). However, if the browser is maximised or large enough it alters the layout of the contents inside the modal so that the labels are now to the left of the fields (which means one word per line and looks very messy).

Any idea how I have overcome this behavior so that the class form-horizontal is working to the width of the modal, not the browser window?

Update with code:

Here is the structure of the modal

<div id="CCNewModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
                 <h4 id="CCTitle" runat="server" class="modal-title">New Credit Card</h4>

            </div>
            <div class="modal-body">
                <div>
                    <fieldset>
                        <div id="selectCardDiv" class="form-group">
                            <label id="selectCardLabel" class="col-lg-2 control-label" for="selectCard">Card Type</label>
                            <div class="col-lg-10">
                                <select class="form-control" id="selectCard" runat="server">
                                    <option value="0">Select Card</option>
                                    <option value="Amex">Amex</option>
                                    <option value="MasterCard">MasterCard</option>
                                    <option value="Visa">Visa</option>
                                </select>
                            </div>
                        </div>
                        <div id="selectNameDiv" class="form-group">
                            <label id="selectNameLabel" class="col-lg-2 control-label" for="inputCCName">Name</label>
                            <div class="col-lg-10">
                                <input class="form-control" id="inputCCName" runat="server" type="text" placeholder="Name (as on statement)">
                            </div>
                        </div>
                        <div id="selectNumberDiv" class="form-group">
                            <label id="selectNumberLabel" class="col-lg-2 control-label" for="inputCCNumber">Number</label>
                            <div class="col-lg-10">
                                <input class="form-control" id="inputCCNumber" runat="server" type="text" placeholder="Credit Card Number (no spaces)">
                            </div>
                        </div>
                        <div id="selectMonthDiv" class="form-group">
                            <label id="selectMonthLabel" class="col-lg-2 control-label" for="selectMonth">Expiry Month</label>
                            <div class="col-lg-10">
                                <select class="form-control" id="selectMonth" runat="server">
                                    <option value="0">Month</option>
                                    <option value="01">Jan</option>
                                    <option value="02">Feb</option>
                                    <option value="03">Mar</option>
                                    <option value="04">Apr</option>
                                    <option value="05">May</option>
                                    <option value="06">Jun</option>
                                    <option value="07">Jul</option>
                                    <option value="08">Aug</option>
                                    <option value="09">Sep</option>
                                    <option value="10">Oct</option>
                                    <option value="11">Nov</option>
                                    <option value="12">Dec</option>
                                </select>
                            </div>
                        </div>
                        <div id="selectYearDiv" class="form-group">
                            <label id="selectYearLabel" class="col-lg-2 control-label" for="selectYear">Expiry Year</label>
                            <div class="col-lg-10">
                                <select class="form-control" id="selectYear" runat="server"></select>
                            </div>
                        </div>
                        <div id="selectCVVDiv" class="form-group">
                            <label id="selectCVVLabel" class="col-lg-2 control-label" for="inputCVV">CVV</label>
                            <div class="col-lg-10">
                                <input class="form-control" id="inputCVV" runat="server" type="text" placeholder="Security Code (CVV)">
                            </div>
                        </div>
                        <div id="selectBillingAddressDiv" class="form-group">
                            <label id="selectBillingAddressLabel" class="col-lg-2 control-label" for="inputBillingAddress">Billing Address</label>
                            <div class="col-lg-10">
                                <textarea class="form-control" id="inputBillingAddress" runat="server" rows="3" placeholder="Address as on Statement"></textarea>
                            </div>
                        </div>
                        <div id="selectBillingCityDiv" class="form-group">
                            <label id="selectBillingCityLabel" class="col-lg-2 control-label" for="inputCCCity">City</label>
                            <div class="col-lg-10">
                                <input class="form-control" id="inputCCCity" runat="server" type="text" placeholder="City">
                            </div>
                        </div>
                        <div id="selectBillingStateDiv" class="form-group">
                            <label id="selectBillingStateLabel" class="col-lg-2 control-label" for="selectState">State</label>
                            <div class="col-lg-10">
                                <select class="form-control" id="selectState" runat="server">
                                    <option value="0">Select State</option>
                                    <option value="AL">Alabama</option>
                                    <option value="AK">Alaska</option>
                                    <option value="AZ">Arizona</option>
                                    <option value="AR">Arkansas</option>
                                    <option value="CA">California</option>
                                    <option value="CO">Colorado</option>
                                    <option value="CT">Connecticut</option>
                                    <option value="DE">Delaware</option>
                                    <option value="DC">District of Columbia</option>
                                    <option value="FL">Florida</option>
                                    <option value="GA">Georgia</option>
                                    <option value="HI">Hawaii</option>
                                    <option value="ID">Idaho</option>
                                    <option value="IL">Illinois</option>
                                    <option value="IN">Indiana</option>
                                    <option value="IA">Iowa</option>
                                    <option value="KS">Kansas</option>
                                    <option value="KY">Kentucky</option>
                                    <option value="LA">Louisiana</option>
                                    <option value="ME">Maine</option>
                                    <option value="MD">Maryland</option>
                                    <option value="MA">Massachusetts</option>
                                    <option value="MI">Michigan</option>
                                    <option value="MN">Minnesota</option>
                                    <option value="MS">Mississippi</option>
                                    <option value="MO">Missouri</option>
                                    <option value="MT">Montana</option>
                                    <option value="NE">Nebraska</option>
                                    <option value="NV">Nevada</option>
                                    <option value="NH">New Hampshire</option>
                                    <option value="NJ">New Jersey</option>
                                    <option value="NM">New Mexico</option>
                                    <option value="NY">New York</option>
                                    <option value="NC">North Carolina</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="OH">Ohio</option>
                                    <option value="OK">Oklahoma</option>
                                    <option value="OR">Oregon</option>
                                    <option value="PA">Pennsylvania</option>
                                    <option value="RI">Rhode Island</option>
                                    <option value="SC">South Carolina</option>
                                    <option value="SD">South Dakota</option>
                                    <option value="TN">Tennessee</option>
                                    <option value="TX">Texas</option>
                                    <option value="UT">Utah</option>
                                    <option value="VT">Vermont</option>
                                    <option value="VA">Virginia</option>
                                    <option value="WA">Washington</option>
                                    <option value="WV">West Virginia</option>
                                    <option value="WI">Wisconsin</option>
                                    <option value="WY">Wyoming</option>
                                </select>
                            </div>
                        </div>
                        <div id="selectBillingZipDiv" class="form-group">
                            <label id="selectBillingZipLabel" class="col-lg-2 control-label" for="inputCCZip">Zip / Postcode</label>
                            <div class="col-lg-10">
                                <input class="form-control" id="inputCCZip" runat="server" type="text" placeholder="City">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label" for="inputCCCountry">Country</label>
                            <div class="col-lg-10">
                                <input disabled="" value="United States" class="form-control" id="inputCCCountry" runat="server" type="text" placeholder="City">
                            </div>
                        </div>
                        <div id="selectTelephoneDiv" class="form-group">
                            <label id="selectTelephoneLabel" class="col-lg-2 control-label" for="inputCCTelephone">Telephone</label>
                            <div class="col-lg-10">
                                <input class="form-control" id="inputCCTelephone" runat="server" type="text" placeholder="Telephone (format as 123-456-7890)">
                            </div>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input id="selectPrimaryCB" runat="server" type="checkbox" checked>Primary (default) card</label>
                        </div>
                    </fieldset>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
                <button id="CreditCardSaveButton" runat="server" class="btn btn-primary" type="button">Save</button>
            </div>
        </div>
    </div>
</div>

and the following CCS override

<!-- language: lang-css -->

#CCNewModal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

Master page is basically - the page I am working on fits into the MainContent placeholder

<form runat="server" class="form-horizontal">

<div class="container body-content">
         
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        </asp:ContentPlaceHolder>
        <hr />
        <footer>
            <asp:Label ID="FooterLabel" runat="server" Font-Size="Small"></asp:Label>
        </footer>
    </div>

</form>

This is what the form looks like using form-vertical

..and it really does a number with the modal formatting

.. using form-horizontal (wide and narrow)

Can I override this behavior so that the class form-horizontal is working to the width of the modal, not the browser window?

In short, No. The styles for form-horizontal are based on media queries run against the size of the window. Media queries cannot be run against the size of other elements. Of course, you can use javascript to figure out the size of other elements and change other elements accordingly, but you'd lose all the native performance benefits of using plain old CSS and letting the browser do the work.

If the browser is maximised or large enough it alters the layout of the contents inside the modal so that the labels are now to the left of the fields

But that's exactly what horizontal forms do. If you don't want that kind of functionality, why don't you change it to a basic form? It sounds like, even if this wasn't space constrained by the modal window, this form would run into trouble if you have long label names and not enough column width to display them on a single line.

Here's an example of a Horizontal Form in a Modal

<!-- begin snippet: js hide: true --> <!-- language: lang-html -->

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal">
    Launch Horizontal Form
</button>

<!-- Modal -->
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                
                <form class="form-horizontal" role="form">
                  <div class="form-group">
                    <label  class="col-sm-2 control-label"
                              for="inputEmail3">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" 
                        id="inputEmail3" placeholder="Email"/>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label"
                          for="inputPassword3" >Password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control"
                            id="inputPassword3" placeholder="Password"/>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <div class="checkbox">
                        <label>
                            <input type="checkbox"/> Remember me
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <button type="submit" class="btn btn-default">Sign in</button>
                    </div>
                  </div>
                </form>
                
            </div>
            
            <!-- Modal Footer -->
            <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>

<!-- end snippet -->

Here's an example of a basic form that maintains it's structure at all screen sizes:

<!-- begin snippet: js hide: true --> <!-- language: lang-html -->

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalNorm">
    Launch Normal Form
</button>

<!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                
                <form role="form">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control"
                      id="exampleInputEmail1" placeholder="Enter email"/>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control"
                          id="exampleInputPassword1" placeholder="Password"/>
                  </div>
                  <div class="checkbox">
                    <label>
                        <input type="checkbox"/> Check me out
                    </label>
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
                </form>
                
                
            </div>
            
            <!-- Modal Footer -->
            <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>

<!-- end snippet -->

Alternatively, you could try to override some of the styles that .form-horizontal applies if you don't have much control over the markup. You could add some CSS like this (depending on the structure of your horizontal form)

<!-- language: lang-css -->

.modal-body .form-horizontal .col-sm-2,
.modal-body .form-horizontal .col-sm-10 {
    width: 100%
}

.modal-body .form-horizontal .control-label {
    text-align: left;
}
.modal-body .form-horizontal .col-sm-offset-2 {
    margin-left: 15px;
}

Horizontal Form with CSS

<!-- begin snippet: js hide: true --> <!-- language: lang-css -->

.modal-body .form-horizontal .col-sm-2,
.modal-body .form-horizontal .col-sm-10 {
  width: 100%
}

.modal-body .form-horizontal .control-label {
  text-align: left;
}
.modal-body .form-horizontal .col-sm-offset-2 {
  margin-left: 15px;
}

<!-- language: lang-html -->

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal">
    Launch Horizontal Form
</button>

<!-- Modal -->
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                
                <form class="form-horizontal" role="form">
                  <div class="form-group">
                    <label  class="col-sm-2 control-label"
                              for="inputEmail3">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" 
                        id="inputEmail3" placeholder="Email"/>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label"
                          for="inputPassword3" >Password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control"
                            id="inputPassword3" placeholder="Password"/>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <div class="checkbox">
                        <label>
                            <input type="checkbox"/> Remember me
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <button type="submit" class="btn btn-default">Sign in</button>
                    </div>
                  </div>
                </form>
                
            </div>
            
            <!-- Modal Footer -->
            <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>

<!-- end snippet -->

Here's a Demo in jsFiddle