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

okaeri pro asked 2 years 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?"/>

issue form

Mikołaj Smoleński staff answered 2 years ago

Hello @okaeri,

You can easily set the width of the helper text by adding the following rule:

.form-outline .form-helper:first-of-type {
  width: 80%;

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.


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



Specification of the issue

  • ForumUser: 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