Applying the css attribute {display: none;}

Use this board to ask questions or have discussions with other Rich Displays users.
Post Reply
RichDotson
Profound User
Posts: 22
Joined: Fri Aug 06, 2010 1:40 pm
First Name: Rich
Last Name: Dotson
Company Name: Wheeling & Lake Erie Rail
State / Province: Ohio
Country: United States
Contact:

Applying the css attribute {display: none;}

Post by 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?
User avatar
Alex
Profound Logic Staff Member
Posts: 233
Joined: Fri Jan 04, 2008 12:10 pm
First Name: Alex
Last Name: Roytman
Company Name: Profound Logic Software
Contact:

Re: Applying the css attribute {display: none;}

Post by 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.
Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests