Applying the css attribute {display: none;}
-
- 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;}
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
- 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;}
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:
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.
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);
Who is online
Users browsing this forum: No registered users and 5 guests