MVC partial page and input label overlap when pre-populating


Topic: MVC partial page and input label overlap when pre-populating input

Don Slattery asked 2 years ago

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 mdbootstrap example input


the same problem also happens to me. simple html page Version: MDB Pro 4.7.0


Jakub Strebeyko staff answered 2 years ago

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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.6.1
  • Device: Desktop
  • Browser: Google Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No