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

Material design floating labels – line width issue

  • lopezcjf

    Posts: 3
    Member Reply #640


    Thanks a lot for this amazing theme!

    Just wanted to share with you my short experience using the new floating label feature.

    First of all, I had the same issue than the one posted here:

    … and I’d like to add some issues when using bootstrap-datepicker. If you select a date, the input won’t stay in “edited” mode. I hope the fix will be addressed soon!.  But, anyway, with some small workarounds the problem can be fixed for us..


    The second comment I have is about the animated bottom line that appears when you click on the input field. Can the line be of the same width than the input field?

    Currently we have something like this: (see attached picture)


    You can see that the line will exceed the width of the input field. This has sense as the style is applied to the input’s parent container (form-group class). But if we have a huge form, having many of these “100% width lines” will make the form look & feel not that nice…

    I also found quite difficult to perform a workaround to this. I tried adding:

    .form-group.form-md-line-input, .form-group.form-md-line-input {
    display: inline-block;
    float: left;

    … and I’ve got the desired result for the line, but makes a mess with the whole form layout…


    Thanks a lot for all your work !!!


    • This topic was modified 4 years, 2 months ago by  lopezcjf.
    You must be logged in to view attached files.

    Posts: 4527
    Support Staff Reply #645

    Hi :),

    Thanks for your feedback on this. We will check those issue further and provide the fix asap in the next update which are planning to release in 1-2 weeks.

    Regarding the issue in the attachment did you follow the same markup from the original demo template ? If possible can you please provide us a test link to your site in a private reply ?



    Posts: 3
    Member Reply #656
    This reply has been marked as private.

    Posts: 4527
    Support Staff Reply #670

    Hi :),

    Yes, that space is from the input text font not from the input’s padding or margin. You can use chrome’s dev tool and debug the line inputs and you can see that the space is part of the font. But we will check it further and improve it if possible to make it more perfect :).

    Anyway thanks for your feedback. Appreciate your contribution in making Metronic better.


You must be logged in to reply to this topic.