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.

Hi there,

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

Best regards

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.

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.

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

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');
    }
});

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

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

edit using mdb 4.4.4 with npm:

"mdbootstrap": "^4.4.4",

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

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

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

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!

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