Topic: Error message has been displayed incorrectly

mmielko pro asked 4 years ago


Error message for input field has been displayed incorrectly. Details below.
<Input label="Example label" className="invalid" error="Long error message hereeeeee" />

Details on image screenshot





Anna Morawska staff answered 4 years ago


Himmielko , please try to add to your css stylesheet additional rule as shown below:
.md-form label{
  width: 100%;
}
Best, Ania

Jakub Mandra staff answered 4 years ago


Hey, for validation we have prepared Validation component. Check out here   Best, Jakub

mmielko pro commented 4 years ago

I can see only example of how to use validation with bootstrap input fields. Could you show me example how to use it by using your <Input> component for react? 


Jakub Mandra staff commented 4 years ago

Ah yes, you can use it fully only with bootstrap styled inputs...

If you just replace `input` with our `MDBInput` it will only change border colors, the feedback message wont appear.

This functionality is not marked as priority right now, but we will come to it.


Jakub Mandra staff commented 4 years ago

But you can just add class `md-form`, as Ania wrote. 

Remember to delete labels, because this will break the layout.



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 React
  • MDB Version: 4.7.1
  • Device: desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes