input floating label not trigger

  1. MDB Home Page
  2. Support Main Page
  3. Angular
Topic: input floating label not trigger

Kushan Shanuka asked 5 years ago

Floating label not trigger when using with angular or jquery set input value.its set value on top of label.not float to top

kmckinley pro answered 5 years ago

I ran into this same issue using it with Angular2. My solution was to just check the model that it wasn't null and it's length was greater than 0. If so then I add the .active class <label [class.active]="user.city && user.city.length > 0" for="city">{{ 'City' | translate }}</label>

Michal Szymanski staff answered 5 years ago

Which component exactly do you mean? Fixed buttons?

Kushan Shanuka answered 5 years ago

I mean form input. when curser focus to input filed, label animate to top. Im using angular for my project with mdbootstrap. an example when edit form field,that value and label display conflict.

Michal Szymanski staff answered 5 years ago

We'll check the issue. Angular 1 or 2? And which version of MDB?

Kushan Shanuka answered 5 years ago

angular 1 with angular ui router, mdbootstrap 3. I found something ,that issue comes inisde <ui-view>

Mike Hutter answered 5 years ago

I'm having the same issue with knockout. I think that at the time the input is rendered, there is no value and the label is placed "inside" the input like it should. However when the value is bound via knockout (or jquery or angular), the trigger must not be detecting that the value of the input has changed and never "slides up" and out of the way of the input's text. Essentially what happens is the label is actually covering up the text that is in the input and neither are legible. I am using MDB 4.0.1 with knockout 3.4.0 and the markup is the code from the very first example on this page: http://mdbootstrap.com/components/forms/

Dave Fisher pro answered 5 years ago

We have the same issue. We do a hack fix where we set the focus on every single input element when the page loads. This solution doesn't really work well in Angular2 though, so please let me know if there is a better fix. Thanks.

Mike Hutter answered 5 years ago

Any update on this?

Michal Szymanski staff answered 5 years ago

For last few weeks we have been working on new update of MDB, so we didn't have time to do anything with that issue. I'll investigate the problem in the next few days and come back to you. Thank you for your patience.

marcin r. pro answered 5 years ago

i got this also on 4.1.0 - is there already any better workaround than set focus on all inputs after bind value?

Michal Szymanski staff answered 5 years ago

Guys, try to add a class .active to the label when updating the input value. Let me know if it solve your problem. Another solution is keeping the label always up. You can do it via sass/css go to sass/mdb/free/_form-basic.scss and in line 130 remove .active class. label.active { change to: label { Then compile your custom mdb.css

Rostislav pro answered 4 years ago

I have the same issue with Angular 1. I use two temporary solutions for this. 1. In Angular use jquery to addClass('active') into label of input fields. Static definition class='active' not work. 2. Just set attribute for input fields: placeholder=" "

polis.gints pro answered 4 years ago

kmckinley  ty, your variant for Angular2 works.
Status

Closed

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
input-floating-label
Related topics
1
Input field label doesn't update styles when value set programmatically
0
material design input style outdated
0
Animation (slowness) - On components like Dropdown, Select, Input
0
label floating not working with value dynamically
0
Floating labels not working correctly for deferred loaded inputs
About author
Kushan Shanuka
10Support score
1Questions 2Answers
0Snippets likes 0Snippets

We use cookies to offer you a better browsing experience, analyze site traffic, personalize content, and serve targeted advertisements. Read about how we use cookies and how you can control them by clicking "Cookie Settings." If you continue to use this site, you consent to our use of cookies.