I am currently facing an issue with a form that contains hidden errors. The CSS for this form, written in Stylus, is as follows:
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
When using jQuery to show these errors upon an AJAX callback, the following code snippet is used:
$form.submit(function(e) {
e.preventDefault();
$.post($form.attr('action'), $form.serialize(), function(data) {
// handle ajax then show errors
$('.error').show(); // only displaying 2 errors instead of all 6
});
});
The strange issue I am encountering is that while I have 6 errors, only 2 are visible in Chrome. However, other browsers seem to display them correctly. Interestingly, if I move $('.errors').show() outside of the submit event, then all 6 errors show up properly.
$('.error').show(); //works here
$form.submit(function(e) {
e.preventDefault();
...
});
After further investigation, I discovered that removing the float:right property resolves the issue in Chrome, but this property is essential for the layout. Despite attempting various solutions to force a repaint, such as those suggested on Stack Overflow and GitHub, I have not been able to find a fix after hours of trying. Any suggestions on how to solve this problem would be greatly appreciated.