Topic: Input label does not move up when value or placeholder is speciied
drgorb pro asked 8 years ago
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.
jorrit free answered 5 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 5 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 5 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):
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 6 years ago
Yaroslav pro answered 6 years ago
Rehman pro answered 6 years ago
<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 6 years ago
Thank you very much for your answer! Have a nice day!Oldskůlový Pysk free answered 6 years ago
Oldskůlový Pysk free commented 6 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 6 years ago
I'm happy that you found fix for that. Have a nice day.euclidwebteam pro answered 6 years ago
<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 6 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 6 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 addressMikołaj Smoleński staff commented 6 years ago
Do You have the latest version of MDB?Adam Stapleton pro answered 6 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 6 years ago
ok this is help fullMohammad Razmara free commented 5 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
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
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 tooMohammad Razmara free commented 5 years ago
Thanks for your help. it's worked and labels move currently but changed every button value for me.
Seydler free commented 4 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
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
jhobeck free answered 6 years ago
Tklaversma free answered 7 years ago
Ian Dexter Mendoza Siñel free answered 7 years ago
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 7 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 7 years ago
colgunn pro answered 7 years ago
gapfranco pro answered 7 years ago
Bartłomiej Malanowski staff answered 8 years ago
willem.sevenster pro answered 8 years ago
drgorb pro answered 8 years ago
onRendered
event of the template
Template.editPrediction.onRendered(()=>{
Materialize.updateTextFields()
})
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No
Abhimanu visions free commented 6 years ago
ok this is goodNaqi Abedi free commented 1 year ago
I found the solution by following this: https://mdbootstrap.com/docs/standard/getting-started/installation/