Treat this entry as a proof-of-concept, as I just discovered it today, and haven’t thoroughly tested the potential or outcomes of this method.
Example code (onclick event for the Reset button above):
document.getElementById('tableMain').style.height= "200px"; var okButton = document.getElementById('OKButton'); okButton.style.top = "-6px";
Example code (onclick event for the Expand button above):
var docElem = document.getElementById('tableMain'); var okButton = document.getElementById('OKButton'); docElem.style.height = parseInt(docElem.style.height) + 50; okButton.style.top = parseInt(okButton.style.top) + 50;
var docElem = document.getElementById('tableMain'); docElem.style.height = "200px";
I welcome feedback and ideas on how this could be put to practical use. Obviously, there’s little reason to have a couple of buttons that expand the form or reset it, so I’m sure the better use case for this would be for evaluating the length of a list select component, for example, and pushing the bottom of the form down some so that the form scrolls instead of the list element. Another use case would be expanding the form height to make room for a conditional panel that’s controlled by a checkbox.