Floating label not moving up on manual input


Topic: Floating label not moving up on manual input

ropapollo asked 5 years ago

Expected behavior

Using a contact form template from the bootstrap website and applying the necessary references for core bootstrap, css etc the form should perform as it does in the template where clicking a text field should push the label above the input field and allow you to type.\

https://mdbootstrap.com/docs/jquery/forms/contact/

Actual behavior

What actually happens is that the floating label will only move if it is using a saved form input stored in my browser e.g. my email address but if I tried to type an email address in manually the label does not move so the text overlaps each other.As a workaround I am using a placeholder which disappears once you begin to type instead of a label but would prefer if I could have the label working as it looks much nicer.

Resources (screenshots, code snippets etc.)

This is what the input fields look like using a placeholder for the name field and floating label for the email field with my email being selected from a saved form template in my browser.1

https://imgur.com/a/ZYVQjvU - Here is the floating label field not working on a manual input

This is what the label code looks like - I added the offset-4 myself for page placement but have tried without and makes no difference.

<div class="col-md-8 offset-4">
   <div class="md-form mb-0">
      <input type="text" id="email" name="email" class="form-control">
      <label for="email" class="">Your email</label>
   </div>

If anyone has any insight much appreciated.


Marta Szymanska staff pro premium answered 5 years ago

Hi,

would you create a snippet showing the problem here: https://mdbootstrap.com/snippets/? I'll try to help you.

Best, Marta


ropapollo commented 5 years ago

Hi Marta

I have created a snippet and uploaded it here - https://mdbootstrap.com/snippets/jquery/ropapollo/907556

I'm very confused as this is working as intended but all I did was copy my code straight into the snippet form. I should add I am a college student so I'm probably missing something incredibly obvious...


ropapollo answered 5 years ago

Update - I managed to fix the issue by placing the contact.php file inside of the mdb folder.

I'm using AWS through FileZilla to host the website and had the contact.php page placed in the root directory originally so despite the reference pointing to the folder it must have been missing something that can't be separated by a 2nd folder.


Bartłomiej Malanowski staff pro premium commented 5 years ago

Thank you for sharing your solution with us!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.4
  • Device: Desktop/Mobile
  • Browser: Google Chrome
  • OS: Windows 10 Pro 64 Bit
  • Provided sample code: No
  • Provided link: Yes