Input label does not move up when value or placeholder is sp

web
mobile

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

drgorb pro asked 4 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

Ram Gopal pro premium commented a year ago

ok this is good

Sven answered 2 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 2 years ago

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

Gohl pro commented 2 years ago

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

Mohammad Razmara commented 5 months ago

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


Adam Stapleton pro answered 2 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');
    }
});

 


Ram Gopal pro premium commented a year ago

ok this is help full

Mohammad Razmara commented 5 months ago

Thanks Adam, it's worked perfectly for me.


Oscar Videla commented 2 months 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!!!!


Mikołaj Smoleński staff answered 2 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 2 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 2 years ago

Do You have the latest version of MDB?

jorrit pro premium answered 4 months 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.


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,

Rehman pro answered a year 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 a year ago

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

drgorb pro answered 4 years ago

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

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

Michal Szymanski staff pro answered 4 years ago

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

willem.sevenster pro answered 3 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

Bartłomiej Malanowski staff pro premium answered 3 years ago

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

gapfranco pro answered 3 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).

colgunn pro answered 3 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.
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 support@mdbootstrap.com with [Angular] prefix or create a thread on this forum. Have a great day!

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


Tklaversma answered 2 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

jhobeck answered 2 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?  

hbthegreat pro answered 2 years ago

Problem is a pretty massive drawback for our projects.

newtongamajr pro premium answered 2 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 pro premium commented 2 months ago

It's almost 4 years and not solved


Bartłomiej Malanowski staff pro premium commented 2 months ago

Some people confirmed this was fixed in 4.10.1


Gohl pro answered 2 years ago

Same Problem here, using 4.4.5 Pro, fix?

lpoore pro answered 2 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>

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

 

 

edit using mdb 4.4.4 with npm:

"mdbootstrap": "^4.4.4",

michaelbelgium commented 2 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)

osoverflow pro answered 2 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.

dsb pro answered 2 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

euclidwebteam pro answered 2 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>

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 commented 2 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 2 years ago

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

Yaroslav pro answered a year 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".
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

de Ville pro answered a year 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


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.


Lubos pro premium answered 9 months 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.


Mikołaj Smoleński staff answered 9 months 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


Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No