Topic: Using input helper with counter is prone to text overlapping
Expected behavior
Both properties are clearly visible at all time, regardless of their length.
Actual behavior
Current style for .form-outline .form-helper is width 100% with absolute position, which is prone to overlapping.
Resources (screenshots, code snippets etc.)
<div style="width: 420px; height: 150px">
<MDBInput counter :maxlength="32" label="Hi!" helper="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab autem facere id iure nemo nostrum optio quam quas, qui saepe sint tempore totam voluptatibus! Commodi consequatur corporis laboriosam unde vitae?"/>
</div>
Hello @okaeri,
You can easily set the width of the helper text by adding the following rule:
<style>
.form-outline .form-helper:first-of-type {
width: 80%;
}
</style>
Keep in mind that multiline helper text is not the best idea, because it has an absolute position and most probably will cause problems with positioning other form elements.
Keep coding, Mikołaj from MDB
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Vue
- MDB Version: MDB5 1.9.0
- Device: N/A
- Browser: N/A
- OS: N/A
- Provided sample code: No
- Provided link: No