0

I have a form with some errors that are hidden by default. This is the CSS (Stylus):

span.error
  display: none
  position: relative
  padding: .25em .5em
  width: 75%
  margin-top: 5px
  margin-bottom: 15px
  float: right
  text-align: center
  background: myorange
  border-radius: radius
  &:after
    arrow(6px)
    top: -12px
    left: 50%
    margin-left: -12px
    border-bottom-color: myorange

Then in jQuery I want to show the errors on the AJAX callback, so:

$form.submit(function(e) {
  e.preventDefault();

  $.post($form.attr('action'), $form.serialize(), function(data) {
    // handle ajax then show errors
    $('.error').show(); // doesn't work properly here, only 2 show up
  });
});

The issue I'm having is very strange. I've 6 errors but only 2 are showing up in Chrome. Every other browser I tried works fine. If I open and close the devtools or zoom in and out for a second then the errors show up as expected.

I found out that if I take the $('.errors').show() outside the submit event then it works as expected and all 6 errors show up.

$('.error').show(); //works here

$form.submit(function(e) {
  e.preventDefault();
  ...
});

I also found out that if I remove float:right then everything works fine in Chrome, but I obviously need this property. I tried triggering a repaint with some solutions I found, but no luck so far. Been stuck for hours...Any ideas on how to solve this?

Community
  • 1
  • 1
elclanrs
  • 92,861
  • 21
  • 134
  • 171

1 Answers1

1

So I found a solution. It turns out that if I float all the elements, including the label and input then it works fine when the error is floated as well, otherwise, if there are no other floats around it then it won't refresh unless you trigger a reflow by resizing the window or zooming in and out etc.

The weirdest thing is that it works outside the submit handler just fine but not inside, that's what was driving me crazy, but I got it all working with floats now anyway. I'm sure this has to be a bug because it works even in IE but I couldn't reproduce it on a fiddle...

elclanrs
  • 92,861
  • 21
  • 134
  • 171