blank space between div and div because of hidden fields

Asked

Viewed 367 times

0

When we have hidden fields between fields that are not hidden the spaces are considered and the form gets a bad look. I was wondering if you could take out these blank spaces between the displayed Divs?

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="lolkittens" />

    <title>Untitled 1</title>
</head>

<script language="javascript">

    function Mudarestado() {

          document.getElementById("ts1").style.visibility = "visible";
          document.getElementById("ts2").style.visibility = "visible";
          document.getElementById("ts3").style.visibility = "visible";
          document.getElementById("ts4").style.visibility = "visible";
          document.getElementById("ts5").style.visibility = "visible";
          document.getElementById("ts6").style.visibility = "visible";
          document.getElementById("ts7").style.visibility = "visible";
          document.getElementById("ts8").style.visibility = "visible";
          document.getElementById("bt1").style.visibility = "visible";

    }

    function Mudarestado2() {

          document.getElementById("ts11").style.visibility = "visible";
          document.getElementById("ts12").style.visibility = "visible";
          document.getElementById("ts13").style.visibility = "visible";
          document.getElementById("ts14").style.visibility = "visible";
          document.getElementById("ts15").style.visibility = "visible";
          document.getElementById("ts16").style.visibility = "visible";
          document.getElementById("ts17").style.visibility = "visible";
          document.getElementById("ts18").style.visibility = "visible";
          document.getElementById("ts19").style.visibility = "visible";
          document.getElementById("ts20").style.visibility = "visible";
          document.getElementById("ts21").style.visibility = "visible";
          document.getElementById("ts22").style.visibility = "visible";
          document.getElementById("bt2").style.visibility = "visible";

    }

</script>

<body>

<div style="width:100%; height: 200px; background-color: #8080FF;">


</div >

<div style="width:100%; height: 700px; background-color: gray;">

    <div><label>cargo</label><input type="text"></div><br />
    <div><label>cargo</label><input type="text"></div><br />
    <div><label>cargo</label><input type="text"></div><br />
    <div><label>cargo</label><input type="text"></div><br />
    <div><label>cargo</label><input type="text"></div><br />
    <div><label>cargo</label><input type="text"></div><br />
    <div><input type="button" value="mudar estado" onclick="Mudarestado()"></div>

    <div id="ts1" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts2" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts3" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts4" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts5" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts6" ><label>cargo</label><input type="text"></div><br />
    <div id="ts7" ><label>cargo</label><input type="text"></div><br />
    <div id="ts8" ><label>cargo</label><input type="text"></div><br />
    <div id="bt1" style="visibility: hidden"><label>cargo</label><input value="mudar estado 2" type="button" onclick="Mudarestado2()"></div><br />
    <div id="ts11" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts12" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts13" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts14" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts15" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts16" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts17" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts18" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts19" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts20" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts21" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts22" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />


</div>

<div style="width:100%; height: 200px; background-color: #FF8000;">
    <div><label>os 700 pixels acaba no fim da tarja laranja</label></div>
</div>

</body>
</html>
javascript
  • 1

    You’re not hiding the Brs, then it’s hard.

2 answers

1

The right way to do this is to use CSS classes, or Javascript associated with the DOM structure.

Doing it that way, inline no style HTML and Javascript functions with a command for each ID is a nightmare. Truth.

I leave a suggestion to rethink the code, and use a way that makes it easier to maintain the code, and it’s more scalable.

function Mudarestado() {
     var inputs = document.querySelectorAll('#campos > div');
     for (var i = 0; i < inputs.length; i++) {
         var el = inputs[i];
         el.classList.toggle('escondido');
     }
 }
.escondido {
    display: none;
}

#campos > div {
	padding: 8px 5px;
}
<div id="campos" style="width:100%; background-color: gray;">

    <div>
        <label>cargo</label>
        <input type="text">
    </div>
    <div>
        <label>cargo</label>
        <input type="text">
    </div>
    <div>
        <label>cargo</label>
        <input type="text">
    </div>
    <div>
        <label>cargo</label>
        <input type="text">
    </div>
    <div>
        <label>cargo</label>
        <input type="text">
    </div>
    <div>
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts1" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts2" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts3" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts4" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts5" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts6">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts7">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts8">
        <label>cargo</label>
        <input type="text">
    </div>

    <div id="ts11" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts12" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts13" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts14" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts15" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts16" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts17" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts18" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts19" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts20" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts21" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts22" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
</div>

<div>
    <input type="button" value="Mudar estado" onclick="Mudarestado()">
</div>

jsFiddle: https://jsfiddle.net/nvzmLfat/1

Notes:

  • in this example I did not clean all the style="xxx" inline in HTML. This should be done with CSS external to HTML whenever possible.

  • as @Bacco referred to those <br /> are not being handled by your Javascript. In fact you should not even have them that way, you can use CSS with margin or padding to move the elements away from each other and thus create space between page elements.

0

Use the display, with visibility the element will continue occupying space even with Hidden

document.getElementById("bt1").style.display = "none";

  • Thanks for your help. The solution was to use the display instead of the visibility.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.