Having trouble with the footer overlapping other div and product cards when generated by AngularJS
I attempted to place it inside some divs other than in the body, but the issue persists
<!DOCTYPE html>
<html>
<head>
<Title>
Search Your City
</Title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="css/liststyle.css">
<script src="script/myscript.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container" >
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />
<link rel="stylesheet" href="css/main.css">
<div class="s003">
<form>
<div class="inner-form">
<div class="input-field second-wrap">
<input id="search" type="text" placeholder="Enter Keywords?" />
</div>
<div class="input-field third-wrap">
<button class="btn-search" type="button">
<svg class="svg-inline--fa fa-search fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70....
....png?size=50x50&set=set1"},
{"id":21,"name":"Holdlamis","address":"Philippines","price":68,"availability":true,"image":"https://robohash.org/eumprovidentarchitecto.jpg?size=50x50&set=set1"},
// Additional records would go here...
]
});
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
Tried to ensure that the footer is set to the bottom of the window, however, it's either taking up space above the top nav bar if placed directly in the body or overlapping the product cards if positioned inside their container.
Please refer to the liststyle.css for additional styling:
// CSS styling goes here...
Main CSS file (main.css) provides additional styles:
// More CSS styling info...
And here’s what you’ll find in myscript.js:
// JavaScript code for functionality...
// Includes scripts for responsiveness and navigation controls