Validation error width on Inputs/TextAreas squishes text

Topic: Validation error width on Inputs/TextAreas squishes text

matt2 pro asked 9 years ago

I'm running into an issue where the validation label's width is limited to the width of the input label. Screen shots: Squished Text

In order to fix this, we're adding:

.md-form {
  label {
    width: 100%;
  }
}

Add comment

Marta Wierzbicka free answered 9 years ago

0 0 Best answer

Hi, Yeah, your solution is much better, so once again thanks for sharing. Best, Marta

Add comment

matt2 pro answered 9 years ago

0 0 Best answer

Might want to do something more targeted, like selecting the label with the data-error attribute.

.md-form label[data-error] {
  width: 100%
}

This way you won't have to append a class to every validating input.

Add comment

Marta Wierzbicka free answered 9 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi Guys, about the class, you mean sth like this: CSS:

.full-width.md-form label {
  width: 100%;
}

And then I add class .full-width and for this error width of validation label will be 100% and without this class width will be auto:

<div class="md-form full-width">
    <input type="text" name="username" class="form-control invalid text" id="frm-form-username">
    <label data-error="Not valid lorem ipsum dolor sitam" for="frm-form-username">Username</label>
</div>

Best, Marta

Add comment

matt2 pro answered 9 years ago

0 0 Best answer

Yeah, that's likely what I'm going to do. Thanks.

Add comment

johndoe pro answered 9 years ago

0 0 Best answer

You could make a class for the error label that your validation plugin creates that has width 100% instead of globally setting all labels to 100%. Otherwise users with MDB 4.3.1 Pro who don't need label at 100% will need to reset it back to width auto.

Add comment

matt2 pro answered 9 years ago

0 0 Best answer