I have two input boxes stacked vertically with some JS validation which runs when the input loses focus and also when form submitted.
When submit is clicked the js runs and if the top box errors, an error message is displayed beneath the box. Similarly, if the lower box errors then the error displays beneath the box. If you click on the lower box first and have no data the error is displayed correctly. If you then click the top box and then lose focus with no data the error is displayed. Problem : When you go to click on the lower box again it is unclickable. I have tried to figure out why but i dont really know.
It's as though the actual input box is static on the page, and then if it is shunted downwards by another dom element appearing above it then only the graphic for the input moves down but the actual input area stays in the same location. I think this because if i hover over the input slowly from the bottom to the top then i cant click on the lower box until i reach approx. 15px above the bottom (which it is clickable but only at the very top of the box) The distance is also approximately by how much the input box has shifted downwards. Because it works ok if the boxes do not move around on the screen i am lead to believe it MUST be something to do with its position which is why it is as though only the graphic moves and the real input area stays in the same place.
Has anybody else had any problems like this? I tried to surround the inputs in a <div> but that didnt solve the problem. See attached screenshots. There must be a solution to this!