Resize the form as hidden fields are displayed

Asked

Viewed 34 times

1

The form shows a white part at the end because it is considering the hidden fields. the scroll bar shall descend to the orange div and not exceed.

<!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" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts7" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts8" style="visibility: hidden"><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

  • Can you add some more information or post the full HTML code? Ñ I’m getting a pretty good idea of where the problem is.

1 answer

0

Put an overflow-y in the Gray background div.

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

  • For what I wanted I put overflow-y: Hidden; But that’s what I really wanted thanks.

Browser other questions tagged javascript

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