I have a pretty typical Boostrap Modal:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create New Customer</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mb-1 pb-1 ">
<form asp-page-handler="CustomerModalPartial" >
<input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
<input name="Id" type="hidden" value="@ViewData.Model.Id" />
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="bmd-label-floating" for="input-name">Company Name</label>
<input asp-for="Name" class="form-control" type="text" id="input-name" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ContactName" class="bmd-label-floating" for="input-contactName">Customer Name</label>
<input asp-for="ContactName" class="form-control" type="text" id="input-contactName" />
<span asp-validation-for="ContactName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ContactEmail" class="bmd-label-floating" for="input-contactEmail">Customer Email</label>
<input asp-for="ContactEmail" class="form-control" type="email" id="input-contactEmail" />
<span asp-validation-for="ContactEmail" class="text-danger"></span>
</div>
</form>
<div class="modal-footer mr-0 pr-0">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal" id="submitButton">Create</button>
</div>
</div>
</div>
</div>
</div>
I load the partial via
$('button[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data("url");
$.get(url).done(function(data) {
placeholderElement.html(data);
placeholderElement.find(".modal").modal("show");
});
});
using a button/placeholder setup like so:
<div style="position: fixed;bottom: 20px;right: 20px;">
<button type="button" class="btn btn-primary bmd-btn-fab" data-toggle="ajax-modal" data-url="@Url.Page("Index", "CustomerModalPartial")">+</button>
</div>
<form method="get">
<div class="form-group">
<label for="search" class="bmd-label-floating">Search</label>
<input type="text" class="form-control" id="search" name="currentFilter" value="@Model.CurrentFilter">
<span class="bmd-help">Search against the customer name, ...</span>
</div>
<input type="submit" style="display: none"/>
</form>
<!-- Modal placeholder -->
<div id="modal-placeholder"></div>
However, my labels don't float:
I have confirmed that I do have the MD Bootstrap properly loaded because the page that shows the modal has a floating search:
Why doesn't my modal have floating labels?
As a side note, I also noticed that I don't get things like checkboxes from the material design bootstrap. I feel like I'm missing something. Thoughts?
