Andy Andy - 10 months ago 37
CSS Question

My form goes off the bottom of page

My HTML form goes off the bottom of the page when too many input boxes are generated. And I cannot scroll down when it does this. How can I fix this? Maybe I need to move the position of the form up a bit as the height of it is always the same regardless of the length of the form.

enter image description here
HTML:

<html >





<title>Register User</title>

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">







<h1>Gym Planner</h1>

<form method="post" action="RUN THAT CODE">
<?php
foreach($exer->results() as $ex){
$name = $ex->Name;
$curId = $ex->ExerciseID;
$sql2 = "SELECT * FROM exercises WHERE ExerciseID = ".$curId;
$details = DB::getInstance()->query($sql2);
$reps = $details->results()[0]->StartReps;
$sets = $details->results()[0]->StartSets;
$weight = $details->results()[0]->StartWeight;

?>
<div class="exdisplay">
<center><input type="text" name="exercise" id="exercise" placeholder="Exercise" value = "<?php echo $name ?>" autocomplete="off" required /></center>
</div>

<div class="statdisplay">
<center><label>Reps:</label> <input type="text" name="reps" id="reps" placeholder="Reps" value = "<?php echo $reps ?>" autocomplete="off" required /></center>
<center><label>Sets:</label> <input type="text" name="sets" id="sets" placeholder="Sets" value = "<?php echo $sets ?>" autocomplete="off" required /></center>
<center><label>Weight:</label> <input type="text" name="weight" id="weight" placeholder="Weight" value = "<?php echo $weight ?>" autocomplete="off" required /></center>
</div>
<?php
}
?>
<center><button type="submit" class="btn">Save</button></center>
</form>

</div>






CSS:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }

html { width: 100%; height:100%; overflow:hidden;
background: url("gym.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

body {
width: 100%;
height:100%;
font-family: 'Open Sans', sans-serif;
}

.login {
position: absolute;
top: 43%; /* Form is 45% from top */
left: 50%; /* Form is 50% across screen*/
margin: -150px 0 0 -150px; /* Position of form on screen */
width:300px; /* width of form */
height:300px; /* height of form */
border: 5px;
}

label {
color: #fff;
text-shadow: 2px 2px 4px #000000;
letter-spacing:2px;
text-align:center;
margin-bottom: 15px; /* Space below title */
}
.login input {
width: 100%; /* 100% of form */
margin-bottom: 10px; /* gap in between each element */
background-color: rgba(0,0,0,0.5); /* background color (opacity 3) of all INPUT elements in login class*/
border: none; /* Border of input elements in login class */
outline: none;
padding: 10px; /* height of each input element in login class*/
font-size: 13px; /* font size */
color: #fff; /* font color */
border: 1px solid rgba(0,0,0,0.2); /* 1 pixel black border of opacity 2 for each input element in login*/
border-radius: 4px; /* can curve the login details elements */
}

.slide input {
width: 10%;
}

.exdisplay input {
width: 75%;
text-align: center;
}

.statdisplay input {
width: 30px;
height: 10px;
text-align: center;
}

Answer Source

You are not able to scroll your web page because of overflow:hidden; property in your CSS file.

Try remove the style overflow:hidden; for the html tag