My Bootstrap form modal form doesn't display properly - asp.net

Question

I am trying to add a modal editing form to a page using Bootstrap. The idea is that when the user picks an item from the grid, an editing form should pop up showing current values and allowing them to make changes. Here's the code for the modal form:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="form-horizontal" id="myForm" role="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">My modal</h4>
</div>
<div class="modal-body">
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbTitle">Public Title:</label>
<div class="input-group col-sm-5">
<input type="text" runat="server" class="form-control required" id="tbTitle">
</div>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbInternalTitle">Internal Title:</label>
<div class="input-group col-sm-5">
<input type="text" runat="server" class="form-control required" id="tbInternalTitle">
</div>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbPrice">Monthly Price:</label>
<div class="input-group col-sm-5">
<input type="text" runat="server" class="form-control required" id="tbPrice">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Now, the thing is, when I click the "Edit" button on a row in the GridView control on the page, it does what it should - it retrieves the plan data and populates the form fields. I know this, because if I examine the page source after clicking an item, here's what I see in the HTML:
<div class="container-fluid page-top">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="form-horizontal" id="myForm" role="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">My modal</h4>
</div>
<div class="modal-body">
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbTitle">Public Title:</label>
<div class="input-group col-sm-5">
<input name="ctl00$cpMain$tbTitle" type="text" id="cpMain_tbTitle" class="form-control required" value="Basic Gold Program" />
</div>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbInternalTitle">Internal Title:</label>
<div class="input-group col-sm-5">
<input name="ctl00$cpMain$tbInternalTitle" type="text" id="cpMain_tbInternalTitle" class="form-control required" value="BASEPLAN" />
</div>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbPrice">Monthly Price:</label>
<div class="input-group col-sm-5">
<input name="ctl00$cpMain$tbPrice" type="text" id="cpMain_tbPrice" class="form-control required" value="$75.00" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
However, when viewing the page normally and clicking the "Edit" button for a row, here's a screenshot of what actually appears:
I odn't know why the form data itself doesn't show up, but it's driving me nuts! I don't seem to have any HTML errors (unclosed tags, etc.), so I can't track down what's happening here. Any help?

Answer 1

I put your code into a snippet and it works... odd.
If you can see a correct HTML in the browser's console then maybe it's a css problem.
You should try to set a height property to be sure...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid page-top">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="form-horizontal" id="myForm" role="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">My modal</h4>
</div>
<div class="modal-body">
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbTitle">Public Title:</label>
<div class="input-group col-sm-5">
<input name="ctl00$cpMain$tbTitle" type="text" id="cpMain_tbTitle" class="form-control required" value="Basic Gold Program" />
</div>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbInternalTitle">Internal Title:</label>
<div class="input-group col-sm-5">
<input name="ctl00$cpMain$tbInternalTitle" type="text" id="cpMain_tbInternalTitle" class="form-control required" value="BASEPLAN" />
</div>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbPrice">Monthly Price:</label>
<div class="input-group col-sm-5">
<input name="ctl00$cpMain$tbPrice" type="text" id="cpMain_tbPrice" class="form-control required" value="$75.00" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

Answer 2

Well, the issue was how I was calling the modal form to open. I had to use a different JavaScript function to invoke it, since the other one worked but was buggy in some way. The Javascript function is:
function openModal() {
$('#myModal').modal('show');
}
and it's called from the server side with this:
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
The other one I was using didn't quite get it right, although the modal still appeared. Weird, but it worked. Thanks for the feedback, guys!