Topic: Using input helper with counter is prone to text overlapping

okaeri pro asked 10 months ago


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>

issue form


Mikołaj Smoleński staff answered 10 months ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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: Yes
  • Provided link: No