Azeen Riyaz Azeen Riyaz - 5 months ago 25
HTML Question

Height of window doesnt change

I learned to make an app that will search for videos from youtube. The problem is that when the browser fetches the results and displays them the height of the html,body,.wrapper doesn't change. It stays the same. And I want it to take the full height.
Here is the code.Please Help I am stuck here from 2 days.

Link to codepen

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Youtube Search Engine</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="container" id="main">
<header>
<h1>YoutuSearch</h1>
</header>
<form class="form" role="form">
<div class="form-group">
<label class="sr-only" for="query">Search:</label>
<input type="text" class="form-control" id="query" placeholder="Search Video" required name="query" autofocus autocomplete="off" autosave="off" autocorrect="off" />
</div>
<button type="submit" class="btn">Submit</button>
</form>
</div>
<div class="container results">
<ul>

</ul>
</div>
<footer>
&copy;YoutoSearch <span class="year"></span>
</footer>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>


CSS

@import url(https://fonts.googleapis.com/css?family=Raleway);
html,body,.wrapper {
height: 100vh;
}
body {
background:url(youtube.jpg) center center no-repeat fixed;
font-family: 'Raleway', sans-serif;
}
.wrapper,#main,.results {
position: relative;
}
.wrapper {
background-color: rgba(0,0,0,0.7);
}
.results {
display: none;
border-top: 1px solid #666;
background-color: rgba(255,255,255,0.9);
width: 100%;
}
.searched {
top:5% !important;
}
#main {
transition:all .5s;
top:30%;
}
.results ul {
display: block;
width: 100%;
}
.results ul li {
list-style-type: none;
}
.results {
top:10%;
}
header {
color: #fff;
margin-left: 40%;
}
footer {
color: #fff;
position: absolute;
bottom: 1%;
left: 45%;
}
button[type=submit] {
width: 100%;
padding: 1%;
background: #fd583f;
color: #fff;
}
button[type=submit]:hover {
opacity: 0.9;
}
input {
padding: 2% !important;
font-size: 1.2em !important;
}


JS

$(document).ready(function() {
$('.year').text(new Date().getFullYear());
$('form').submit(function(e) {
e.preventDefault();
search();
$('#main').addClass('searched');
$('.results').fadeIn();
});

function search() {
q = $('#query').val();
$('.results ul').html('');
$.get(
"https://www.googleapis.com/youtube/v3/search",
{
part: 'snippet, id',
q:q,
type:'video',
key:'AIzaSyBPCOibwlo4tn7UirAFYZIG-JMTheo7uJ8',
},
function(data) {
var nextPageToken = data.nextPageToken;
var prevPageToken = data.prevPageToken;
console.log(data);
$.each(data.items,function(i,item) {
var videoId = item.id.videoId;
var title = item.snippet.title;
var description = item.snippet.description;
var thumb = item.snippet.thumbnails.high.url;
var channelTitle = item.snippet.channelTitle;
var videoDate = item.snippet.publishedAt;
var output = "<li>" +
"<div class='pull-left'>" +
"<img src='" + thumb + "' />" +
"</div>" +
"<div class='description'>" +
"<h3>"+ title + "</h3>" +
"<small>By <span class='cTitle'>"+channelTitle+"</span>" + "on " + videoDate + "</small>" +
"<p>"+description+"</p>" +
"</div>" +
"</li>" +
"<div class='clearfix'></div>";
$('.results ul').append(output);
})
}

)
}

})

Answer

Change these rules like this

Updated codepen (with below rules)

/*  removed html, body - not needed in this rule  */
.wrapper {
  min-height:100vh;
  padding-bottom: 22px;    /* compensate for footer so it does not disappear behind search result */
}

header {
  color: #fff;
  text-align: center;   /* keep text centered at different width's */
}

footer {
  text-align: center;
  position: absolute;
  height: 22px;
  bottom: 0;
  width: 100%;
}