1
\$\begingroup\$

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>
Improve this question
\$\endgroup\$
3
  • 1
    \$\begingroup\$ So you want to have a gap between 2 and 4? Just trying to make sure I understand \$\endgroup\$
    – Flambino
    Oct 16, 2012 at 20:03
  • \$\begingroup\$ No, I want it to exactly like that. I just think that my implementation is bad... \$\endgroup\$
    – Juha
    Oct 16, 2012 at 20:50
  • \$\begingroup\$ Why not just add the label name as a data attribute to the element it's for? Example <div data-label="text1">Test 1</div> \$\endgroup\$
    – Larry Battle
    Oct 18, 2012 at 23:39

1 Answer 1

Reset to default
2
\$\begingroup\$

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.

Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.