Topic: MVC partial page and input label overlap when pre-populating input
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
Hi guys,
The input is not watching it's own dynamic value change as of now, just reacts to user actions. To overcome this and have the label go up, consider calling a .focus() event in your dynamic-input-filling routine.
Best Regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.6.1
- Device: Desktop
- Browser: Google Chrome
- OS: Win 10
- Provided sample code: No
- Provided link: No