Topic: Material 2.0 input with pre-populated data
I created a form with a Material 2.0 field. It's an EDIT form, so when it opens, it is pre-populated with data. (It is also in a modal, in case that matters). The field behaves properly on focus and on blur, but when the form first opens, the label is positioned as if the field is empty, overlaying the data in the field. Am I missing something in my code, or is there some special CSS or JS I can add to fix this issue? My code:
<div class="md-form md-outline">
<input type="text" name="txtdescription" id="txtdescription" class="form-control required" value="<?= htmlspecialchars($task[1]) ?>" required>
<label for="txtdescription">Task Description</label>
</div>
I realize that this is 3 years old, but I solved the issue by calling the focus() function on each field after I populated the content via JS. By calling focus(), it triggers the MDB activate function that 1) triggers the material design variation of the field label and 2) forces a re-calculation of the notch so as the outline won't be running through the field label.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.6.1
- Device: MDB version 4.7.1
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes
Piotr Glejzer staff commented 6 years ago
Hi,
I think it's a little bug. Did you have the same problem with our other inputs or just with this?
Best,
Piotr
Tina Meadors pro commented 6 years ago
Good question, Piotr - I haven't used the regular "Material" style inputs before, as my company prefers an outline style. I changed one of the inputs to use the md-form class and had the same issue. Here's a link to screenshot: https://www.dropbox.com/s/95pi86lkd05qt7n/SNAG-2256.jpg?dl=0
I haven't tried it on a form that's not in a modal, so I'll give that a go as well. My modals are loading remote code (a different page than the page that launches the modal), so I'm thinking maybe there's some script or an event listener that isn't getting triggered, since the code in the modal doesn't exist in the page until the modal is launched.
If I can pin that down, I can set the script or event to run when the modal is launched.
jouvrard pro commented 6 years ago
I have the same issue this a long time with pre-populated fields with data with the regular Material style.
Tina Meadors pro commented 6 years ago
I discovered that if I manually add the "active" class to the label, the field & label behave properly.
That pretty much confirms my suspicion that my problem is due to loading a snippet of remote html into a modal. Since the form field doesn't exist on page load - it isn't in the DOM until the modal is launched - any "document ready" event that evaluates whether the field has a value and automatically adds the "active" class didn't get attached to the field.
I've managed to fix similar event issues by attaching the event listener to the modal container, rather than the field element, since the modal container IS in the DOM at page load - it's only the modal contents that are not.
Piotr Glejzer staff commented 6 years ago
Ok, I understood. Thanks for the advice. I added that problem to our to-do list with high priority label so It will be check as soon as possible. Sorry about that and have a nice day.