Despite disabling the style sheet, a dynamically created form is displaying strangely.
This form will show or hide various details based on selected options. For instance, many of the elements are generated with C#.net...
formOutput += "<div class=\"field textBox\" id=\"" + field.Id + "\"><div class=\"labelTB\"><label for=\"" + field.Id + "\" class=\"" + reqClass + "\">" + field.Name + requirement + "</label></div>" +
"<input type=\"text\" class=\"numInput\" id=\"" + field.Id + "_tb\" name=\"" + field.Name + "\" onkeyup=\"Service.refresh(this); numCheck(this)\" onclick=\"numCheck(this)\" />" +
// numButtons:
"<div class=\"minus plusMinus\" id=\"minus_" + field.Id + "\" onmousedown=\"numBox(this)\" /></div>" +
"<div class=\"plus plusMinus\" id=\"plus_" + field.Id + "\" onmousedown=\"numBox(this)\" /></div></div><br />";
...and then the parent node is hidden onload through JS:
var setVisibility = function (id, bool) {
try {
get(id).style.display = (bool) ? "block" : "none";
} catch (e) {
return false;
}
return bool;
}
However, when there are numerous hidden fields, it causes a significant gap in the middle of the form.
I've attempted various solutions without much success. Merely shifting everything up isn't easily achievable due to the complexity of the form...
I even experimented with the following approach:
var setVisibility = function (id, bool) {
try {
get(id).style.display = (bool) ? "block" : "none";
get(id).style.position = (bool) ? "relative" : "absolute";
get(id).style.height = (bool) ? "auto" : "0px";
var children = get("containerType").childNodes
for (var i in children) {
if (children[i].style) {
children[i].style.display = (bool) ? "block" : "none";
children[i].style.position = (bool) ? "relative" : "absolute";
children[i].style.height = (bool) ? "auto" : "0px";
}
}
} catch (e) {
return false;
}
return bool;
}
What could be causing this issue, and is there a viable solution?
(refer to the image below)