Topic: Input label does not move up when value or placeholder is speciied

drgorb pro asked 8 years ago


I am trying to use mdbootstrap in my meteor app but am running into issues with forms: the label does not move above the input when a value is specified withe value="some value" and it does not work either when specifying placeholder="some value I have copied the sample code from the documentation for my tests and it does not behave correctly.

<template name="editPrediction">
    <div class="row">
        <form class="col-md-12">
            <div class="row">
                <div class="input-field col-md-6">
                    <input placeholder="Placeholder" id="first_name" type="text" class="validate">
                    <label for="first_name">First Name</label>
                </div>
                <div class="input-field col-md-6">
                    <input id="last_name" type="text" class="validate">
                    <label for="last_name">Last Name</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col-md-12">
                    <input disabled value="I am not editable" id="disabled" type="text" class="validate">
                    <label for="disabled">Disabled</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col-md-12">
                    <input id="password" type="password" class="validate">
                    <label for="password">Password</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col-md-12">
                    <input id="email" type="email" class="validate">
                    <label for="email">Email</label>
                </div>
            </div>
        </form>
    </div>
</template>
The javascript effects like the fixed top navbar or the wave effects on buttons work just fine. Screen Shot

Abhimanu visions free commented 5 years ago

ok this is good

Naqi Abedi free commented 7 months ago

I found the solution by following this: https://mdbootstrap.com/docs/standard/getting-started/installation/


jorrit free answered 4 years ago


In my situation with Vue I fixed it like so:

<div class="md-form">
  <input type="text" id="Title" v-model="Title" class="form-control">
  <label for="Datum" :class="{ active: Title}">Title</label>
</div>

Maybe it can help others.


Mikołaj Smoleński staff answered 4 years ago


Hi there,

In Your case I suggest to replace label by the placeholder attribute. Dynamic input changes very often causes unexpected issues.

Best regards


Lubos free answered 4 years ago


Dear team, using MDB Pro 4.8.1

I have reigstration form which processes user input and dynamically generates Input field. Code:

<div class = 'row' >
    <div class = 'col-md-12'>
        <div class="md-form">
            <input value='Provider Default' class='form-control' id='provider_title' type='text' name='provider_title' required >
            <label for="provider_title">Provider Label</label>
        </div>
    </div>
</div>

Now the Input value "Provider Default" covers the Label value "Provider Label" and does not move up when the AJAX crates the input.

Please suggest solution.


Arkadiusz Idzikowski staff answered 5 years ago


Hi,

Dynamic steppers require additional setup. You can find all instructions in our documentation (getting started tab):

Steppers documentation

Could you provide more information about the problem with inputs? Please make sure you placed input tag inside div with 'md-form' class.


de Ville free answered 5 years ago


Hello Arkadiusz, I've just bought the MDB Pro version for Jquery. It seems like some css/ js are not taken into account when I try to add new components. For instance the 'Stepper' or 'Input' fields are not displayed correctly even when I add the right classes. I've seen that the support team of this forum suggest and provide extra CSS code. Am I not connecting the files correctly or what could be the matter? Thanks in advance. Adrien


Arkadiusz Idzikowski staff answered 5 years ago


Dear Yaroslav, Please show me the code you are using for the login form inputs. Did you add mdbInputDirective to the input elements? Regards, Arek

Yaroslav pro answered 5 years ago


Still have the same issue for Angular input form components( ng-uikit-pro-standard - "version": "6.2.3"): Adding "active" class didn't help, because after refreshing the page user should click on any place on the page, to activate this "active".

Rehman pro answered 5 years ago


Based on the suggestions above I used vanilla JavaScript to implement the workaround. My project is originally in Angular 6, so once I have some spare time, might change this into a angular directive as well. Posting here just in case someone might find it useful.
<div class="md-form">

<input type="email" id="materialLoginFormEmail" class="form-control" onfocus="onEnter(this)" onblur="onExit(this)">

<label for="materialLoginFormEmail">E-mail</label>

</div>


function onEnter(element) {
if ((element.value !==undefined&& element.value.length >=0) ||$(this).attr('placeholder') !==null) {
element.parentNode.querySelector("label").classList.add("active");
}
}

function onExit(element) {
if ((element.value !==undefined&& element.value.length ==0) ||$(this).attr('placeholder') ===null) {
element.parentNode.querySelector("label").classList.remove("active");
}
}

 
                    
                      

Piotr Glejzer staff commented 5 years ago

Thank you very much for your answer! Have a nice day!

Oldskůlový Pysk free answered 5 years ago


Facing the same problem, its been 3 years since you said that you will fix it in new update, but this issue is still here. Did you forget about this?

Oldskůlový Pysk free commented 5 years ago

Working FIX for me, atleast for now, is to add class "active", to the label of input when it has any value.

Piotr Glejzer staff commented 5 years ago

I'm happy that you found fix for that. Have a nice day.

euclidwebteam pro answered 5 years ago


I'm experiencing OP's problems with MDB 4.5.7 so have reverted to 4.5.6.  To summarize, when I assign a value to a text input using the value attribute, the label overlaps with the input. Code looks like this:
<div class="md-form">
   <input type="text" id="Name" value="Amanda" class='form-control'>
   <label for="Name">Name</label>
</div>

Mikołaj Smoleński staff answered 5 years ago


Hi Adam,

Your solution is very accurate. Thanks for it!

I've modified it a little to show how You could change the value of input using Your code.

$('input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], input[type=date], input[type=time], textarea').each(function (element, i) {
 if ((element.value !== undefined && element.value.length > 0) || $(this).attr('placeholder') !== undefined) {
  $(this).siblings('label').addClass('active');
 }
 else {
  $(this).siblings('label').removeClass('active');
 }
});
$('input[type=email]').val('test').siblings('label').addClass('active');

Regards


chandi pro commented 5 years ago

I have tried the last solution and it doesn't seem to help. I am looking to have a value overwrite the label/placeholder if it exists when the page loads. eg name="email_address" value="$staff_email_address"> Email address

Mikołaj Smoleński staff commented 5 years ago

Do You have the latest version of MDB?

Adam Stapleton pro answered 5 years ago


I'm using 4.5.1 and seems to still not be a way to call a native function to make this happen.

I used the following to make it work as a function to be called on demand:

$('input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], input[type=date], input[type=time], textarea').each(function (element, i) {
    if ((element.value !== undefined && element.value.length > 0) || $(this).attr('placeholder') !== null) {
        $(this).siblings('label').addClass('active');
    }
    else {
        $(this).siblings('label').removeClass('active');
    }
});

 


Abhimanu visions free commented 5 years ago

ok this is help full

Mohammad Razmara free commented 4 years ago

Thanks Adam, it's worked perfectly for me.


Oscar Videla free commented 4 years ago

Works perfectly in jquery Version: 4.10.1 | Last Update: 2019-12-09. Thank you very much!!!!

Funciona perfectamente en jquery Version: 4.10.1 | Last Update: 2019-12-09. Muchas Gracias!!!!


dsb pro answered 6 years ago


I had the same issue in Rails using the asset pipeline with Turbolinks. The fix for me was to wrap the ready call in a function:

// forms-free.js

 

// Set active on labels and icons (DOM ready scope);
 (function() {
   $(document).on("turbolinks:load", function() {
     $(input_selector).each((index, input) => {
       const $this = $(input)
       const $labelAndIcon = $this.siblings('label, i')
       update_text_fields($this)
       const isValid = input.validity.badInput // pure js
       if (isValid) {
         $labelAndIcon.addClass('active')
       }
     })
   });

  }).call(this);

You also need:

$(document).ready(function() { wrapSameFunctionHere } )

so it will catch the page refreshes too.

EDIT: One final thing you will need is to stop Rails from wrapping errors. In config/environements.rb add:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance| 
  html_tag.html_safe 
end

osoverflow pro answered 6 years ago


I have the same problem with version 5.2.2. Is like if the field has data controlled by formcontrol the label don't detect the data.

michaelbelgium free answered 6 years ago


I have the same problem, not sure what's the problem

 

 

edit using mdb 4.4.4 with npm:

"mdbootstrap": "^4.4.4",

michaelbelgium free commented 6 years ago

Fixed it by installing node-waves (should've known as i got the "waves is not defined" js error - but i thought i didn't need it)

lpoore pro answered 6 years ago


Same problem here, using 4.4.5 Pro - Elegant Form.  I copied the form code directly from the documentation. <section name="form-login"class="form-elegant">
<!--Form without header-->
<div class="card card-image"style="background-color: rgba(255, 255, 255, 0.56);">
<div class="card-body mx-4">
<!--Header-->
<div class="text-center">
<h3 class="dark-grey-text">
<strong>Log in</strong>
</h3>
</div>
<!--Body-->
<div class="md-form">
<input type="text"id="Form-email1"class="form-control">
<label for="Form-email1">Your email</label>
</div>
<div class="md-form">
<input type="password"id="Form-pass1"class="form-control mb-2">
<label for="Form-pass1">Your password</label>
<p class="font-small blue-text d-flex justify-content-end">
<a href="#"class="blue-text ml-1">Forgot Password?</a>
</p>
</div>
<div class="text-center mb-3 mt-4">
<button type="button"class="btn btn-unique btn-block btn-rounded z-depth-1a">Log in</button>
</div>
<p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"><strong>or Log in with:</strong></p>
<p class="dark-grey-text font-small">
To use your social media account you must affiliate
it to a policy.
<br /> This is done at registration or through your profile settings.
</p>
<div class="row my-3 d-flex justify-content-center">
<!--Facebook-->
<button type="button"class="btn btn-white btn-rounded mr-md-3 z-depth-1a">
<i class="fa fa-facebook blue-text text-center"></i>
</button>
<!--Twitter-->
<button type="button"class="btn btn-white btn-rounded mr-md-3 z-depth-1a">
<i class="fa fa-twitter blue-text"></i>
</button>
<!--Google +-->
<button type="button"class="btn btn-white btn-rounded z-depth-1a">
<i class="fa fa-google-plus blue-text"></i>
</button>
</div>
</div>
<!--Footer-->
<div class="modal-footer mx-4 pt-3 mb-1">
<!--<p class="font-small grey-text d-flex justify-content-end">Not a member?
<a href="#" class="blue-text ml-1"> Create an Account</a>
</p>-->
<button type="button"class="btn btn-unique btn-block btn-rounded z-depth-1a"><i class="fa fa-user white-text mr-3"></i> Create an Account</button>
</div>
</div>
<!--/Form without header-->
</section>

Gohl pro answered 6 years ago


Same Problem here, using 4.4.5 Pro, fix?

Sven free answered 6 years ago


I had the same issue. My solution is to trigger the inputfields "change" event after setting the new value.

$(inputselector).val(newvalue).trigger("change");

joeynovak pro commented 6 years ago

Thanks for posting this, it's the best solution by far in this thread.

Gohl pro commented 6 years ago

$(inputselector).val(newvalue).change(); works too

Mohammad Razmara free commented 4 years ago

Thanks for your help. it's worked and labels move currently but changed every button value for me.


Seydler free commented 3 years ago

Thanks so much for this solution! Just found your answer after 2 hours searching the internet :-) The topic did not include something like "label overlapping input after updating input value" therefore I did not find it right away. Thanks!


newtongamajr pro answered 6 years ago


I'm using PRO version 4.2.2 and facing exactly the same issue. That's really an anoying that must be solved , since it has been reported two years ago!!!

Aliaswire free commented 4 years ago

It's almost 4 years and not solved


Bartłomiej Malanowski staff commented 4 years ago

Some people confirmed this was fixed in 4.10.1


hbthegreat pro answered 6 years ago


Problem is a pretty massive drawback for our projects.

jhobeck free answered 6 years ago


I have the PRO version 4.4.3 and it still appears to be a problem.  When will this be fixed?  Looks like it has existed for the past 2 years?  

Tklaversma free answered 6 years ago


Is this problem already fixed? I'm encountering the same problem. When I programmatically set a value on an input, the label doesn't go up (get state active) > so the value and label on the same spot. Hope someone can help me out. TK

Hi,
I am encountering the same issue, I tried the solutions above and still get the same output.
Click Here to See sample output.
I created a function that will be used to fill values for textboxes.

function fill_control(_ctrlName, _ctrlVal) {
$(_ctrlName).val('');
$(_ctrlName).val(_ctrlVal);
}

And here is the code snippet of how I call the function:
fill_control('#txtCustomerSupportExecutive',_jsonresult[0]['customersupportexecutive']);
Could you help me?
Thank you.
Regards,
Ian


Piotr Bender free answered 6 years ago


Hello,In response to your issue, I wanted to let you know about just released MDBootstrap Angular kit, that may be a sufficient solution to this or any other issues you have had with Angular integration so far.The kit can be found at the following link:https://mdbootstrap.com/angular/It contains all the components you could find in MDB jQuery version.We encourage you to try it out and report any bugs or issues at contact@mdbootstrap.com with [Angular] prefix or create a thread on this forum.Have a great day!


Rafael Araújo free answered 6 years ago


The problem occured to me when setting the input text value programatically: $("#productName").val("My Product"); I managed to move the placeholder up calling jQuery .focus() for each input (with placeholder) I was setting the value: Works both ways, with the .focus() after setting the value.. $("#productName").val("My Product").focus(); ..or with the .focus() before setting the value $("#productName").focus().val("My Product"); Hope it helps,

colgunn pro answered 7 years ago


I've the same problem - overwriting of label with preset value or placeholder. I seem to have solved the problem (4.3.0) by setting the class of the label to 'active' whenever a value or placeholder is given to the input.

gapfranco pro answered 7 years ago


I think it's the same problems we get with Angular 2. Due to the asynchronous nature of data operations in Angular (data arrives after form is displayed), sometimes the labels are not moved up in the fields properly. We get the labels overlapped with the fields values (the labels don't move up when the data of the form arrives).

Willem, could you please describe your problem with more details? Do you have any console logs?

willem.sevenster pro answered 7 years ago


Michal, I'm using mdb 4.2.0 PRO and this issue has either regressed or was not fixed. I'm using mdb with angular js 2. Do you have an update on it? Thanks, Willem

Smith free answered 8 years ago


Michal Szymanski staff answered 8 years ago


We'll fix it in new MDB release, thanks!

drgorb pro answered 8 years ago


I found the solution: You have to add a call to the onRendered event of the template

Template.editPrediction.onRendered(()=>{
   Materialize.updateTextFields()
})

FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags