Andy Andy - 1 month ago 5
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

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

Comments