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?