This topic contains 9 replies, has 6 voices, and was last updated by Sean Sean 2 years, 9 months ago.

Material inputs


  • slatermater
    Participant

    Posts: 5
    Member Reply #1866

    Hi,

    I seem to have a problem when I’m using floating material inputs, if the form is populated with content it’s overlaid on top of the input fields – please see attached? Is there a way to trigger labels to sit on top of the fields if there are values allocated to the fields?

    The problem occurs on the preview of your theme too, please see attached.

    Thanks, Rick

    Attachments:
    You must be logged in to view attached files.
    Zis
    Zis
    Participant

    Posts: 150
    Support Staff Reply #1914

    Hello and thank you for getting in touch.

    Can you provide us a test link to your developing site in a private reply (just check “set as a private reply”
    checkbox to make your replies visible only to support staff)? We will need to check your code only in order to advise you further.

    Thanks 🙂


    slatermater
    Participant

    Posts: 5
    Member Reply #1919

    Hi Zis,

    Thank you, I’m working on a development laptop… but it happens on your demo site too. If you enter some data in firefox, and then hit the circular refresh icon at the top… the page reloads but keeps the values in the input boxes and they’re unreadable.

    Of course if you have  the theme set up, you could add the value=”test” attribute to the input fields to recreate the error.

    Appreciate your help, Rick.

    Sean
    Sean
    Keymaster

    Posts: 4444
    Support Staff Reply #1980

    Hi :),

    Thanks for reporting this issue. We just fixed it and the fix will be released in the next update very soon.
    In the main time as a hot fix you can append(to the bottom) below code in metronic.js under handleMaterialDesign function:

    $(‘.form-md-floating-label .form-control’).each(function(){
    if ($(this).val().length > 0) {
    $(this).addClass(‘edited’);
    }
    });

    If you need any further clarifications please let us know.

    Thanks.


    dnussbaum
    Participant

    Posts: 3
    Member Reply #1991

    Another addendum to this fix that you should add is:

    `$(‘body’).on(‘change’, ‘.form-md-floating-label .form-control’, function(e) {
    handleInput($(this));
    });`

    so that changes triggered with trigger(‘change’) instead of a user interaction still trigger the class change.

    • This reply was modified 2 years, 10 months ago by  dnussbaum.

    raghu
    Participant

    Posts: 1
    Member Reply #1993

    Hi,

    I purchased your themes it’s good but can shift to standalone angularjs app.

    In themes inside “admin_material_design” angularjs app and inside admin one  <span style=”line-height: 1.5;”>angularjs</span><span style=”line-height: 1.5;”> app wich one is original angularjs app .</span>

    Please tell me how can i not dependent (means any plugin dependency )separate the app in single angularjs app  admin theme4  standalone application.

    thanks

     

     

    Sean
    Sean
    Keymaster

    Posts: 4444
    Support Staff Reply #2010

    Hi Raghu :),

    Thanks for your feedback.

    Please note that the AngularJS version of Metronic is based on the HTML version of Metronic and it reuses  core jQuery code from the HTML version. Implemeting 100% native app for Metronic can be considered in a future releases since it requires some time.

    To stay updated please follow us on http://twitter.com/keenthemes 😉

    Thanks.

    Sean
    Sean
    Keymaster

    Posts: 4444
    Support Staff Reply #2011

    H dnussbaum :),

    Thanks for sharing your solution. We highly appreciate your contribution.

    Thanks.

     


    KennedyOliveira
    Participant

    Posts: 1
    Member Reply #2470

    Hello everyone!

    I’m trying this solution and it doesn’t work for the AngularJS version, just for the html, there is a way of fixing it in the Angular version?

    Thx in advanced!

    Sean
    Sean
    Keymaster

    Posts: 4444
    Support Staff Reply #2480

    Hi

    Did you try http://keenthemes.com/forums/topic/material-inputs/#post-1991 ?

    If yes, are you getting any error in the console ? By right this solution should work for both angularjs and html versions. If possible can u provide us a test link to your developing site in a private reply ?

    Thanks.

You must be logged in to reply to this topic.