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

Form Wizard with Material Design Floating Labels


  • augustolima
    Participant

    Posts: 31
    Member Reply #2810

    Hi.

    I’m trying to create a Form Wizard using Material Design with Floating Labels but I found some bugs. I don’t know if I generated them, but I can’t fix it.

    The background from “form-actions” is grey and overlays the form inputs.

    Sorry my english :/

    See the image below:

    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #2820

    Hi,

    Thanks for contacting our support. Can you please provide us a test link to your issue page in a private reply ? We will need to check and debug your code in order to provide you the fix since this is not a general bug.

    Thanks.


    augustolima
    Participant

    Posts: 31
    Member Reply #2822
    This reply has been marked as private.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #2829

    Hi,

    Noted. Sure, please try to attach as a file the HTML output of your developing page.

    Thanks.

     


    augustolima
    Participant

    Posts: 31
    Member Reply #2834
    This reply has been marked as private.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #2844

    Hi :),

    Please try to add “clearfix” class to following DIVs:

    1) <div class=”form-wizard clearfix”>…

    2) <div class=”form-body clearfix“>…

    If you need any further assistance please let us know.

    Thanks.

     

     


    augustolima
    Participant

    Posts: 31
    Member Reply #2853

    Worked.

    Thank you.


    augustolima
    Participant

    Posts: 31
    Member Reply #2854

    Now I have another problem.

    If I use “form-horizontal” in form class my input fields break, like images below.

    When I remove the “form-horizontal” class, my confirmation tab break.

    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #2872

    Hi :),

    Can you please deploy your site to your test server and provide us a link in a private reply ? If we can check your code online we could provide more effective support.

    Thanks.


    augustolima
    Participant

    Posts: 31
    Member Reply #2877
    This reply has been marked as private.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #2896

    Hi,

    If you used “form-horizontal” layout you should use proper markup for the line inputs(material design mode) following:
    http://www.keenthemes.com/preview/metronic/theme/templates/admin/form_controls_md.html

    Or as a workaround you can set the “form-horizontal” class with DIV for the last step only. 

    Thanks.

You must be logged in to reply to this topic.