Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

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

AdamEsterle free 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

sarky pro answered 4 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 4 years ago

Figured it out, wasn't loading manifest.js which was compiled not sure why.

Gambare free 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 free commented 5 years ago

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

Aliaswire free 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.

Ybara free answered 5 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 :)

gmuckelvene pro answered 8 years ago

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

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.

AdamEsterle free 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!

Michal Szymanski staff 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>

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.

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".

AdamEsterle free 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

Michal Szymanski staff answered 8 years ago

Paste your code here and write me please which browser do you use.
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
  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
AdamEsterle
12Support score
14Questions 18Answers 0Snippets