Applying the css attribute {display: none;}

[RichDotson]

I have a section of a form that I want to display or hide based on other values that the user enters. I can show or not show the section using the 'visibility' property but I want the area where the element is to be compressed and not take up space on my page. I've tried using the css attribute '{display: none;}' in an external css file. This did the same thing as the 'visibility' property. Is there a way to 'compress' the area where an element if it is not displayed?

[Alex]

There is not an easy to do this at the moment. We are working on better layout options for widgets that will allow you to accomplish this.

The way to accomplish this for now is to write some JavaScript to shift the appropriate elements up. Here is what this may look like:

Code: Select all

function shiftElements(from, to, moveBy) {
  function processEls(tag) {
    var els = document.getElementsByTagName(tag);
    for (var i = 0; i < els.length; i++) {
      var el = els[i];
      var top = parseInt(el.style.top);
      if (el.parentNode.parentNode == document.body && !isNaN(top) && top >= from && top <= to) {
        top += moveBy;
        el.style.top = top + "px";
      }
    }
  }
  processEls("div");     // move output fields and labels
  processEls("input");   // move textboxes, checkboxes, radio buttons
  processEls("select");  // move dropdowns
}

shiftElements(400, 9999, -200);

What this will do is shift up by 200 pixels any elements that are currently located on the screen between pixels 400 and 9999. shiftElements() is a generic function in this case that can be reused.