Filled input-text and error-message

[daniele.pecora]

The issue

When using filled input-text that shows a validation error message the error message overlaps the input field.

Filled InputText with ErrorMessage overlapping.



Sample 2




The cause

I think this happens mainly because in opposite of FilledInput the TextBox style is applied on the outer container .md-inputield instead of the input/textarea itself.

This is the CSS selector to TextBox

Code: Select all

  .md-inputfield.md-inputfield-box > *:not(label){
  ...
  }

Since the error message and message are also contained in there, they then get squeezed.

The workaround

My workaround for this is to use the FilledInput-style md-inputfield-fill instead of TextBox md-inputfield-box and enhance the CSS a bit.

Code: Select all

/**
 * Fix using filled input as filled textbox
 */
body .md-inputfield.md-inputfield-fill .ui-chips,
body .md-inputfield-fill.md-autocomplete .ui-chips,
body .md-inputfield.md-inputfield-fill .ui-multiselect,
body .md-inputfield-fill.md-autocomplete .ui-multiselect,
body .md-inputfield.md-inputfield-fill .ui-dropdown,
body .md-inputfield-fill.md-autocomplete .ui-dropdown,
body .md-inputfield.md-inputfield-fill textarea,
body .md-inputfield-fill.md-autocomplete textarea,
body .md-inputfield.md-inputfield-fill input,
body .md-inputfield-fill.md-autocomplete input {
  padding-top: 24px;
}

body .md-inputfield.md-inputfield-fill label,
body .md-inputfield-fill.md-autocomplete label {
  margin-top: 20px;
}

body .md-textarea.md-inputfield-fill textarea {
  padding-top: 24px;
}

body .md-textarea.md-inputfield-fill label {
  margin-top: 0px;
}

This then looks like a text box

[merve7]

Hi,
Thank you for your feedback and solution. This is a big change, therefore, we need to check and test with others component and after that, we get back to you. You can add your code in overrides/_theme_styles file until we decide about this issue.