What is the simplest way of hiding labels and inputs in a way that they do not affect the layout. See image and the code below. The label text3 is hidden and there is no extra gap between text2 and text4. In this implementation I put both in div container and change its .style.display property.
Edit: the figure is excactly what I want but the implementation is not good. In other words, how to rewrite the function (e.g. getting rid of div and using css...).
Example of hiding a row
<html>
<body>
<script type="application/javascript">
function hideableLabelAndTextInput(divId, inputId, labelTxt){
// container
var hiderDiv = document.createElement('div');
hiderDiv.style.display = 'block';
hiderDiv.id = divId
// label
var newLabel = document.createElement('label');
newLabel.innerHTML = labelTxt;
// textBox
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.id = 'inputId';
// grouping
hiderDiv.appendChild(newLabel);
hiderDiv.appendChild(newTextBox);
return hiderDiv;
}
for (var i=0; i<10; i++){
elem = hideableLabelAndTextInput('div' + i, 'text' + i, 'text' + i);
document.body.appendChild(elem);
}
document.getElementById('div3').style.display = 'none';
document.getElementById('div6').style.display = 'none';
</script>
</body>
</html>
1 Answer 1
I would use a combination of CSS and JavaScript for this use-case. Essentially what you want to achieve is a simple solution to showing and hiding form elements.
This is what I would suggest for markup:
<form id="myform" method="POST" action="/some/processing/script">
<fieldset id="group-a" class="input-group">
<label for="my-input-element-1" class="input-wrapper">
<span>My Element Label</span>
<input type="text" id="my-input-element-1" value="" />
</label>
<!-- Repeat as many times as you need -->
</fieldset>
</form>
CSS:
#myform label {
display: block;
margin: 0 0 10px 0; /* Set the bottom margin to whatever you want */
}
#myform label > span {
display: block; /* display:block will force the input element below it */
margin: 0 0 3px 0; /* Set the bottom margin to whatever you want */
}
#myform label > input[type="text"] {
display: block; /* The default is inline, but we want to span the whole width */
width: 100%; /* Full width */
padding: 5px 0; /* Trick to allow an input to span the full width, without poking out of the containing element */
margin: 0; /* Set the bottom margin to whatever you want */
text-indent: 5px; /* Indent the text to make it appear normally */
}
#myform label.hidden {
display: none !important;
visibility: hidden !important;
}
/* OR */
.hidden {
display: none !important;
visibility: hidden !important; /* Prevent element from affecting the box model, e.g. whitespace between visible, surrounding elements */
}
Now, with this setup in mind, you should only have to add or remove the class .hidden from either the containing <label /> element or apply it to the <fieldset /> element if you want to hide the whole group.
Also, if you're going to go to the trouble of hiding input fields, I'd recommend setting the disabled attribute, e.g. <input type="text" disabled="disabled" /> to prevent it's values from being serialized/submitted as part of the form.
<div data-label="text1">Test 1</div>\$\endgroup\$