ApexLib comes with a better Error Display Solution, which sometimes can cause troubling behaviour.

When displaying error messages in the notification area the rest of the page is shifted downwards a little. This is no problem most of the time, except in this case:

1. you have a form with required fields
2. you enter some of the fields and then realize you don’t want to enter more but leave the form
3. so you press the “Cancel” Button while your cursor is still in an empty required field
4. before the Cancel Button is processed the field validation displays the “Field is required” Message
5. displaying the Error shifts the button downwards, the mouse cursor isn’t hovering above the button anymore
6. the browser decides, that you clicked into empty space and discards Button processing

Long story short, you have to press the button a second time if an error message is displayed in the notification area when pressing the button.

I haven’t found any satisfying solution to avoid this problem in a programmatically way, so this leaves us with few options:

1. ignore it and let your users click a second time
2. have a fixed size notification area (this is kind of complicated, since you never know how many error messages you need to display)
3. my favorite: let the notification area hover above the rest of your form

Solution 3 can look like this, depending on your layout or used theme you’ll have to implement it in a different way.

See a working solution online in the Demo-Application.

All I had to do, was modifying the CSS Settings for the notification area:

.t7notification {
 background:none repeat scroll 0 50% #FFFFCC;
 border:1px solid #FFD700;
 color:#333333;
 font-size:11px;
 font-weight:bold;
 left:25%;
 margin:4px auto;
 opacity:0.8;
 filter:alpha(opacity=80);
 padding:2px;
 position:absolute;
 text-align:center;
 width:50%;
}