Filled input-text and error-message

Post Reply
daniele.pecora
Posts: 13
Joined: 05 Jan 2017, 12:45

21 Mar 2019, 17:45

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.

Image

Sample 2

Image


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

Image

merve7
Posts: 493
Joined: 12 Sep 2017, 10:44

08 Apr 2019, 12:52

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.

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest