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.
Using javascript, we’re able to dynamically resize a form to provide more real-estate when required.
At first glance, it seems that the reference element for which we are altering the height is “tableMain”. It also seems that any positioning of elements on the form (the OK button, for instance) must be offset in value by the “Top border height” of the theme’s top border. For example: the theme above has a top border height of 150, so the “Reset” event subtracts 150 from the designer “top” value of 144, and ends up using “-6px” in the javascript to reset the position. If no theme is being used, the normal designer value can be used in the javascript.
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;
There’s also a body onload event, because initially, the “tableMain” element is getting its height value from its css class, so we need to inline it so we can easily alter it with javascript.
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.
