Form Label Does not go up on label click

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Form Label Does not go up on label click

AdamEsterle asked 8 years ago

http://pasteboard.co/8fMbMK4nC.png If you click the label directly (put cursor on letter and click), the label does not pop up for you to enter text You have to click right between the label and the bottom border of the input field. I think you should be able to click that label to set focus on the form and then the label will be triggered and pop up

Michal Szymanski staff pro premium priority answered 8 years ago

Paste your code here and write me please which browser do you use.

AdamEsterle answered 8 years ago

LATEST CHROME <div class="form-group"> <div class="md-form"> <input class="form-control" name="name" type="text"> <label for="name">Name</label> </div> </div> Clicking the "Name" label does not put focus in the input box nor trigger the label to pop up You have to click PRECISELY between the "Name" label and the bottom border of the input box

sirdante pro answered 8 years ago

try this <div class=”form-group”> <div class=”md-form”> <input class=”form-control” name=”name” id="name" type=”text”> <label for=”name”>Name</label> </div> </div> in input id="x" and in label for="x".

gmuckelvene pro answered 8 years ago

I'm having the same issue. I'm also using the latest version of Google Chrome. The text area just allows me to type right over the label without the animation firing. Any help would be appreciated.

Michal Szymanski staff pro premium priority answered 8 years ago

What about this code? 
<div class="md-form">
    <input type="text" id="form1" class="form-control">
    <label for="form1" class="">Example label</label>
</div>

AdamEsterle answered 8 years ago

Thank you! It works fine! I did forget the id = name (which corresponds to the label's for) I only had the name attribute set, I will make the change!

gmuckelvene pro answered 8 years ago

I wasn't as lucky. I'm using Visual Studio 2013 and I am putting the code into my .aspx page. I'm having all kinds of issues with small things. Like the waves-effect doesn't work on anything. Cant get a dropdown to open in my navbar. With this many issues i'm sure its something on my end i'm not doing correctly. I'm pasting the examples in but it doesn't seem to be working correctly.

gmuckelvene pro answered 8 years ago

fixed it! Was getting a conflicting CSS on my masterpage.

Ybara answered 6 years ago

I had the same problem, I found the solution, I put the latest version of scripts and it worked. I use the contact form v2. I hope it will help :)

Aliaswire answered 5 years ago

Not working with Id for combination too. We have to active it by editing it

Grzegorz Bujański staff commented 5 years ago

Create a snippet with your code here : https://mdbootstrap.com/snippets/ I'll look at this.

Gambare answered 5 years ago

This code is not working for me 

<div class="md-form">
    <input type="text" id="form1" class="form-control">
    <label for="form1" class="">Example label</label>
</div>

I'm using mdb-pro-4.11.0 with SF4 and Webpack encore

Here is my app.js

import '../css/app.scss';
import 'jquery';
import 'bootstrap';
import 'chart.js';
import '../MDB-Pro_4.11.0/js/mdb.min'

and app.scss

@import '~font-awesome';
@import '~bootstrap';
@import '../MDB-Pro_4.11.0/scss/mdb-pro';
@import '../MDB-Pro_4.11.0/css/addons/flag.min.css';

Gambare commented 5 years ago

I switch to mdb-lite-pro and it's working

sarky pro answered 5 years ago

I am having the same problem

I am using Laravel with the latest npm package compiled correctly and does not seem to work.

tried mdb-pro.css and mdb-lite-pro.css No joy.

<div class="md-form">
                <input type="text" {{$product->product_description}} id="product_description" name="product_description" class="form-control">
                <label for="product_description">Product Description</label>
            </div>

enter image description here

Sample of what i am talking about.

sarky pro commented 5 years ago

Figured it out, wasn't loading manifest.js which was compiled not sure why.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
AdamEsterle
12Support score
14Questions 18Answers
0Snippets likes 0Snippets