search

guillaumepotier / Parsley.js

Validate your forms, frontend, without writing a single line of javascript
http://parsleyjs.org
MIT License
9.05k stars 1.32k forks source link

Error message text shrinks when specific error message is displayed #1353

Closed stkol76 closed 3 years ago

stkol76 commented 3 years ago

Using Bootstrap 4.6.0 and Parsley JS 2.9.2 I see an odd behavior of the error text .. The text shrinks and I am not able to change the font size to a fixed size in the CSS.

Below is 2 pictures showing the issue..

How it should be (displaying standard error message when empty) image

How it looks like when displaying more specific error texts image

The CSS:

input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
}

.parsley-errors-list {
  margin: 2px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 1.0em;
  line-height: 0.9em;
  opacity: 0;
  color: #B94A48;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}
marcandre commented 3 years ago

I'm sorry you are having issues. Parsley itself does not check for sizing and I believe has no CSS that influences display size. I suspect there's other styling in your page that influences this. If I am mistaken and you figure this out and find that the CSS or JavaScript of Parsley is actually at fault, please open an issue.