When rendering a partial page in ASP.Net MVC, the label overlays the text in the input using the example for for inputs. Is there a solution to this problem? Once the input control gets focus, the label adjusts to its proper position.

Code to load container

$('#detail').load('myurl');

Cotntainer

<div id="detail"></div>

Example code from mdbootstrap in the partial view

<div id="detail"></div>
   <div class="md-form">
    <input value="John Doe" type="text" id="inputPrefilledEx" class="form-control">
    <label for="inputPrefilledEx">Example label</label>
</div>

Output after partial page is rendered on the page