Level 8
overflow-x: hidden;
1 like
Aug 12, 2021
1
Level 8
HTML CSS BOOTSTRAP - Page not Full Height!
Hey I started playing a game called FOXHOLE and decided to create a clan to organize a little better. But I have run into an issue where the page height is not dropping to corresponds with the content. The content just falls off the bottom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="http://127.0.0.1:8000/css/bootstrap.css">
<link rel="stylesheet" href="http://127.0.0.1:8000/css/mine.css">
<link rel="stylesheet" href="https://getbootstrap.com/docs/5.0/examples/sidebars/sidebars.css">
<title>Document</title>
<!-- Livewire Styles -->
<style >
[wire\:loading], [wire\:loading\.delay], [wire\:loading\.inline-block], [wire\:loading\.inline], [wire\:loading\.block], [wire\:loading\.flex], [wire\:loading\.table], [wire\:loading\.grid] {
display: none;
}
[wire\:offline] {
display: none;
}
[wire\:dirty]:not(textarea):not(input):not(select) {
display: none;
}
input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {
animation-duration: 50000s;
animation-name: livewireautofill;
}
@keyframes livewireautofill { from {} }
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #25694b;">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarRightAlignExample"
aria-controls="navbarRightAlignExample"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarRightAlignExample">
<!-- Left links -->
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<!-- Check to see if the user is logged in. -->
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav> <main>
<h1 class="visually-hidden">Sidebars examples</h1>
<div class="d-flex flex-column flex-shrink-0 p-3 text-white" style="background: linear-gradient(180deg, rgba(37,105,75,1) 0%, rgba(25,51,40,1) 100%); width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<span class="fs-4">Joshua</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
Home
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
Orders
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
Products
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
Customers
</a>
</li>
</ul>
</div>
<div class="b-example-divider"></div> <div wire:id="Y3VtL0HqQLQVkDiFdOCv" wire:initial-data="{"fingerprint":{"id":"Y3VtL0HqQLQVkDiFdOCv","name":"home","locale":"en","path":"home","method":"GET"},"effects":{"listeners":[]},"serverMemo":{"children":[],"errors":[],"htmlHash":"e5a9fd5a","data":{"cardTabNumber":0,"cardTabHead":"Welcome!","cardTabBody":"Here you can browse the tab's to get an understanding of the structure of our organization."},"dataMeta":[],"checksum":"1c8d1759332ce93eb0d72f7208ac5ff6a9d3ad893b6ea00eaae42e1edfefeb88"}}" class="w-50 mx-auto">
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>
</div>
<main>
<div class="b-example-divider"></div>
<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white" style="width: 380px;">
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
<span class="fs-5 fw-semibold">Orders List</span>
</a>
<div class="list-group list-group-flush border-bottom scrollarea">
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong>
<small>Wed</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong>
<small class="text-muted">Tues</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong>
<small class="text-muted">Mon</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong>
<small class="text-muted">Wed</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
</div>
</div>
</main> <!-- Livewire Scripts -->
<script src="/livewire/livewire.js?id=83b555bb3e243bc25f35" data-turbo-eval="false" data-turbolinks-eval="false"></script>
<script data-turbo-eval="false" data-turbolinks-eval="false">
if (window.livewire) {
console.warn('Livewire: It looks like Livewire\'s @livewireScripts JavaScript assets have already been loaded. Make sure you aren\'t loading them twice.')
}
window.livewire = new Livewire();
window.livewire.devTools(true);
window.Livewire = window.livewire;
window.livewire_app_url = '';
window.livewire_token = 'lfQxmmajm87enFSSAFPDL387Hj3GRhypSf5uapW6';
/* Make sure Livewire loads first. */
if (window.Alpine) {
/* Defer showing the warning so it doesn't get buried under downstream errors. */
document.addEventListener("DOMContentLoaded", function () {
setTimeout(function() {
console.warn("Livewire: It looks like AlpineJS has already been loaded. Make sure Livewire\'s scripts are loaded before Alpine.\n\n Reference docs for more info: http://laravel-livewire.com/docs/alpine-js")
})
});
}
/* Make Alpine wait until Livewire is finished rendering to do its thing. */
window.deferLoadingAlpine = function (callback) {
window.addEventListener('livewire:load', function () {
callback();
});
};
let started = false;
window.addEventListener('alpine:initializing', function () {
if (! started) {
window.livewire.start();
started = true;
}
});
document.addEventListener("DOMContentLoaded", function () {
if (! started) {
window.livewire.start();
started = true;
}
});
</script>
<script src="http://127.0.0.1:8000/js/bootstrap.min.js"></script>
</body>
</html>
Please or to participate in this conversation.