Inputs Floating Labels size
I am using a Metronic HTML template (demo 40) and I need to make my controls, such as inputs, select, etc... of the type 'Floating Labels' to make the font smaller and therefore reduce the padding and margin space to top and bottom. Is there a style where I can specify the size of the Floating Label control?
Thank you.
Greetings from Mexico
Replies (3)
To customize the font size and reduce padding/margin for floating label inputs in Metronic HTML Template (Demo 40), you can override the default styles by targeting the .form-control and .form-label classes—adjust font-size, line-height, and padding accordingly via custom CSS. For example:
.form-control.form-control-sm {
font-size: 0.875rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.form-label {
font-size: 0.75rem;
}
This provides a more compact layout, particularly useful in dense forms. As an analogy, just like Home Fix and Tools by Nawazia simplifies home maintenance with the right-sized tools for each task, your UI benefits from appropriately scaled inputs for clarity and efficiency. Be sure to test responsiveness after these adjustments, especially if you're integrating with Metronic's utility classes.
Hi,
Please note that Metronic does not support floating label inputs and it only optimized for normal inputs.
Regards,
Sean
