Bootstrap form not rendering without additional form element - html

Question

I'm having a problem with a form inside of a modal using Bootstrap 3.2.2. Here's my HTML:
<div class="modal fade" id="emailModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true" class="fa fa-close"></span><span class="sr-only">Close</span></button>
<h4 class="modal-title"><span style="padding-right:10px;" class="fa fa-envelope" aria-hidden="true"></span>E-Mail Developer</h4>
</div> <!-- .modal-header -->
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="toEmailInput" class="col-sm-2 control-label">To</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="toEmailInput" placeholder="Enter Email" />
</div>
</div>
<div class="form-group">
<label for="subjectInput" class="col-sm-2 control-label">Subject</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="subjectInput" placeholder="Enter Subject" />
</div>
</div>
<div class="form-group">
<label for="messageInput" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea class="no-resize form-control" id="messageInput" rows="5" placeholder="Enter Message"></textarea>
</div>
</div>
</form>
</div> <!-- .modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Send</button>
</div> <!-- .modal-footer -->
</div> <!-- .modal-content -->
</div> <!-- .modal-dialog -->
</div> <!-- .modal -->
This renders this:
But, if I add an additional tag <form role="form"></form> anywhere in the page, I get this:
Any idea of what witchcraft is going on behind the scenes here? I would expect it to look like the second picture without additional form tags.
UPDATE - After taking a look at the applied CSS from my before & after, it looks like the removal of the additional <form> tag also removes the applied .form-horizontal styling from the form itself. I'm continuing to investigate, but I have a feeling it has to do with something about the way the site is configured.
UPDATE - I found the issue. Without the additional <form> tag, there's some funkiness in the web app that is removing the surrounding <form class="form-horizontal"> tag but leaving the form-groups alone. Very strange!
UPDATE - Well, surprise surprise. Turns out my ASP.NET Web Forms (yes, with a <form runat="server"> tag) strips out "nested" form elements. Yes, I realize I didn't mention I was using web forms, but I was hoping it was unrelated. Turns out it's completely related!

Answer 1

Turns out this is due to ASP.NET Web Form's innate ability to strip out nested <form> tags from its "master" <form runat="server"> form used for post-backs.
To prove this, I changed my <form class="form-horizontal"> into a simple <div> with the same class, and it worked fine.

Answer 2

I was able to recreate your problem in JSFiddle. So probably you should check your paddings and one margin of the following classes. I think you are overriding them by your CSS, so you should check it.
.modal-body {
position: relative;
padding: 15px;
/*modified by me to reproduce your problem, check out where you are setting
the bottom padding to 0 (should be 15px)*/
padding-bottom: 0;
}
.form-group {
/*modified by me to reproduce your problem, check out where you are setting
the bottom margin to 0 (should be 15px)*/
margin-bottom: 0px;
}
.modal-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
/*modified by me to reproduce your problem, check out where you are setting
the bottom & right padding to 0 (should be 15px)*/
padding-top: 0;
padding-right: 0;
}

Answer 3

Here is my fiddle using your code:
JSFIDDLE
I added a button for ease of use. Because i'm not referencing the stylesheet that has the ".control-label" and ".no-resize" classes, I'm not getting the same problem.
I really think that your issue lies in one of those two aforementioned classes that are not BootStrap classes.
Can you share the rules for those two classes?
Thanks!
.control-label {?}
.no-resize {?}