I try to make a layout with two scrollable columns (with bootstrap 2.2). Now it seems to be working if i remove the "!doctype html" tag so i assume something with my layout is not according to the specification. Can somebody tell me what i did wrong or how i could easier find my error?
<!doctype html> <!-- scrolling only works without the doctype -->
<html xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" media="screen" href="bootstrap.min.css">
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<a class="brand" href="#">Title</a>
<ul id="myTab" class="nav nav-tabs">
<li>Serials</li>
<li>Parameter</li>
<li class="active">Log</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container max-height no-overflow">
<div class="row max-height">
<div class="tabbable tabs-left">
<div class="tab-pane active" id="log">
<div class="span2 scrollable">
<div class="pad40-top">
First menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br >menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu </br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br> menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu< /br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br> menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu< /br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>main
</div>
</div>
<div class="span10 scrollable">
<div class="pad40-top">
First Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br> Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br >Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</ br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content< /br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content </br>Content</br>Content</br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
correct the many, many </br> </br > etc tags
<html xmlns="http://www.w3.org/1999/html"> should be <html xmlns="http://www.w3.org/1999/xhtml">
add a <title>
remove the stray </div> at the bottom
Now you have a html5 doc that validates. To get the scrollables to work, you must give either body or .scrollable a height. You cannot have a scrollable defined as 100% of 100%.
if you set
.scrollable {
height: 500px;
overflow: auto;
}
it works, OR - set the height dynamically in javascript :
<script type="text/javascript">
$(document).ready(function() {
var h=$(window).height();
$('.scrollable').height(h+'px');
});
</script>
note : the code just simulates the 100%->100%, top of the scrollables is still behind the navbar, and you must implement some code to take care of window resizing.
cleaned markup :
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 500px;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
<!-- or :
<script type="text/javascript">
$(document).ready(function() {
var h=$(window).height();
$('.scrollable').height(h+'px');
});
</script>
-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<a class="brand" href="#">Title</a>
<ul id="myTab" class="nav nav-tabs">
<li>Serials</li>
<li>Parameter</li>
<li class="active">Log</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container max-height no-overflow">
<div class="row max-height">
<div class="tabbable tabs-left">
<div class="tab-pane active" id="log">
<div class="span2 scrollable">
<div class="pad40-top">
First menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu <br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br> menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br> menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>main
</div>
</div>
<div class="span10 scrollable">
<div class="pad40-top">
First Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br> Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content <br>Content<br>Content<br>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Related
I'm trying to obtain a simple layout composed by a stack of header, main section, footer.
I'm using bootstrap 5.
The entire layout must cover all the available space in width and height, overflow (x and y) must be hidden.
Header and wrapper must take all the needed space.
Main section must be in between header and footer and must take all the available space.
Main section is composed by a sidebar and an area that will contain the main content.
Sidebar and main content are disposed side by side.
Sidebar must take 1/6 of the entire width available.
Main content must take the rest of available space in width.
Here is some code:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title></title>
</head>
<body>
<div class="d-flex flex-column wrapper">
<div>
<nav class="navbar navbar-light header">
<div class="px-3">
<a class="navbar-brand" href="#">
Header
</a>
</div>
</nav>
</div>
<section class="flex-grow-1 d-flex section">
<div class="col-2 sidebar">
<ul class="nav flex-column menu-nav">
<li class="nav-item px-3 py-2">
Sidebar
</li>
</ul>
</div>
<div class="col p-2 px-3 content">
Main content
</div>
</section>
<nav class="navbar navbar-light header">
<div class="px-3">
Footer
</div>
</nav>
</div>
</body>
<style>
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.header {
background-color: #1ea185;
}
.wrapper {
height: 100vh;
}
.section {
}
.sidebar {
height: 100%;
overflow-y: auto;
background-color: #fff;
}
.content {
height: 100%;
overflow-y: auto;
background-color: #eff6f6;
}
</style>
</html>
I would like to show overflow-y for sidebar/main content when it's needed. But I would also like to preserve the position of footer.
<div class="col p-2 px-3 content relative">
<div class="absolute inset-0 overflow-y-scroll">
Main content
</div>
</div>
Set the .content container as relative, then put content in inner div of absolute inset-0.
Edit: this is just an example, I was using tailwind syntax on the class, bootstrap might be slightly different classNames
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title></title>
</head>
<body>
<div class="d-flex flex-column wrapper">
<div>
<nav class="navbar navbar-light header">
<div class="px-3">
<a class="navbar-brand" href="#">
Header
</a>
</div>
</nav>
</div>
<section class="flex-grow-1 d-flex section">
<div class="col-2 sidebar">
<ul class="nav flex-column menu-nav">
<li class="nav-item px-3 py-2">
Sidebar
</li>
</ul>
</div>
<div class="col p-2 px-3 content relative">
<div class="absolute inset-0 overflow-y-scroll">
Main content
</div>
</div>
</section>
<nav class="navbar navbar-light header">
<div class="px-3">
Footer
</div>
</nav>
</div>
</body>
<style>
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.header {
background-color: #1ea185;
}
.wrapper {
height: 100vh;
}
.section {
}
.sidebar {
height: 100%;
overflow-y: auto;
background-color: #fff;
}
.content {
height: 100%;
overflow-y: auto;
background-color: #eff6f6;
}
</style>
</html>
How do I push down the left-most column a position-fixed according to navbar height which has fixed-top???
Here is my HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
html,
body {
height: 100%!important;
}
.navbar-brand img {
filter: invert(65%) sepia(91%) saturate(7314%) hue-rotate(210deg) brightness(101%) contrast(98%);
}
</style>
<style>
.scrollable {
overflow: hidden;
height: 100%!important; /* Otherwise we have to use h-100 on the .scrollable section?!? */
}
.scrollable:hover {
overflow: auto;
}
::-webkit-scrollbar {
width: 3px;
height: 3px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-track {
background-color: #FEFEFE;
}
::-webkit-scrollbar-thumb {
background-color: #6c757d;
}
</style>
<title>BS5 Layout</title>
</head>
<body class="bg-light">
<header class="navbar navbar-light bg-light fixed-top p-0 border-bottom">
<div class="col-12 col-md-3 col-lg-2">
<a class="navbar-brand text-primary px-2" href="#">
<img src="https://simplisti.com/assets/logo.svg" width="32" height="32" class="d-inline-block align-top " loading="lazy">
Brand
</a>
</div>
<nav class="col-12 col-md-9 col-lg-10 border-start" aria-label="breadcrumb">
<ol class="breadcrumb mt-3 px-2">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Contacts</li>
<li class="breadcrumb-item active" aria-current="page">List</li>
</ol>
</nav>
</header>
<div class="container-fluid h-100">
<div class="row h-100">
<section class="h-100 col-md-3 col-lg-2 position-fixed p-0 scrollable">
This won't scroll all the way to bottom?!?
item<br>
...
Last item
</section>
<section class="h-100 col-md-5 col-lg-7 offset-md-3 offset-lg-2 p-0 border-start">
Repeat this content and navbar disappears after X number of scrolls<br>
...
Last line<br>
</section>
<section class="h-100 col-md-4 col-lg-3 p-0 border-start">
SIDE
</section>
</div>
</div>
</body>
</html>
Thanks in advance :)
Body padding is required as your nav is fixed!
The fixed navbar will overlay your other content unless you add
padding to the top of the . Try out your own values or use our
snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Include this line after the bootstrap stuff! Working demo and code!
How to center the contents inside this container without sacrificing the width. I could decrease width and do margin: 0 auto but thats not what I want.
Currently the form doesn't look in the middle it looks aligned left. From the first character to the end of the image the form should appear to be at the center of the page that is what I am trying to do.
https://jsfiddle.net/yj4zh297/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Print Form</title>
<style type="text/css">
.line{
border-bottom: 1px solid black;
}
.clear {
clear: both;
}
.row {
margin: 0;
}
.container-fluid div {
margin-bottom: 3px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background: grey;">
<div class="col-sm-6 float-right">
<!--.img-fluid . max-width: 100%; and height: auto; are applied to the image so that it scales with the parent elemen-->
<figure style="max-width: 200px; max-height: 200px;">
<img src="https://i.imgur.com/rC8Btb0.jpg" class="img-fluid" alt="image">
</figure>
</div>
<div class="col-sm-6 float-left">
Form Number: <span class="line">21129012</span><br>
</div>
<div class="col-sm-12">
Hostel: <span class="line">(Yes / No)</span><br>
</div>
<div class="col-sm-12">
Course Applying For: <span class="line"> BSC Informatics and robotics</span><br>
</div>
<div class="col-sm-12">
Full Name (IN BLOCK LETTERS): <span class="line"> DLKLKDJ LKDJDKDJD</span><br>
</div>
<div class="col-sm-12">
Gender: <span class="line"> Male</span><br>
</div>
<div class="col-sm-12">
Phone Number: <span class="line"> 3838443322</span><br>
</div>
<div class="col-sm-12">
Email: <span class="line"> 3838443322</span><br>
</div>
</div> <!--end of container-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
You can set a width:100%; max-width: 800px; to the container-fluid.
And add margin-left:auto; margin-right:auto;
I want to create a dashboard from scratch for learning purposes using Bootstrap 3.3.7. I have problem with the left hand menu. I want it to occupy the whole area it gets (col-lg-1 column and 100% height). My problem is that the min-height:100% with height: auto doesn't work, but min-height:xxx px works well.
I saw other posts here saying that min-height:100% should work.
What I'm doing wrong?
Here is the plunker.
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<main style="margin-top: 0px; padding-top: 0px; padding-bottom: 0px;">
<div class="container-fluid padding-left-zero padding-right-zero">
<div class="container-fluid padding-left-zero padding-right-zero">
<div style="margin-bottom: -20px;">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class=" container-fluid row">
<div class="pull-left">
<a class="navbar-brand" href="/">Dashboard</a>
</div>
<div style="height: 50px; padding: 15px;" class="pull-right">
<select>
<option value="module">value</option>
</select>
</div>
</div>
</nav>
</div>
</div>
<div class="row container-fluid padding-left-zero padding-right-zero">
<!-- code of lenfthandmenu -->
<!-- <div class="col-lg-1 pull-left navbar-inverse fill">
<div ui-view="leftHandMenu"></div>
</div>-->
<div class="col-lg-1 pull-left navbar-inverse fill2">
<div ui-view="leftHandMenu"></div>
</div>
<div class="col-lg-11 pull-right">
<div ui-view="mainContent"></div>
</div>
</div>
<div>
<div class="navbar navbar-inverse navbar-fixed-bottom">Navbar bottom</div>
</div>
</div>
</main>
</body>
</html>
Css:
/* Styles go here */
body {
padding-top: 50px;
}
.padding-left-zero {
padding-left: 0px;
}
.padding-right-zero {
padding-right: 0px;
}
li {
list-style: none;
}
.silver-text {
color: silver;
}
.min-width-100-percent {
min-width: 100%;
}
.fill {
min-height: 100%;
height: auto;
}
.fill2 {
min-height: 300px;
height: auto;
}
Apply absolute position property and height as 100% like below.
.fill2 {
position:absolute;
height: 100%;
}
DEMO
I have an app that I am trying to build that uses three-columns. Currently, I have the following code:
<html>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">
<style type="text/css">
.app {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.app-col {
height: 100%;
}
.fullwidth {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
</style>
<meta class="foundation-data-attribute-namespace">
<meta class="foundation-mq-xxlarge">
<meta class="foundation-mq-xlarge-only">
<meta class="foundation-mq-xlarge">
<meta class="foundation-mq-large-only">
<meta class="foundation-mq-large">
<meta class="foundation-mq-medium-only">
<meta class="foundation-mq-medium">
<meta class="foundation-mq-small-only">
<meta class="foundation-mq-small">
</head>
<body>
<div class="app">
<div class="row fullwidth" data-equalizer="">
<div style="width:33%; height:100%;">
<div class="row" data-equalizer="">
<div class="large-6 columns" style="background-color:#467EAF;">
<h3>Hello</h3>
<nav>
<ul style="list-style: none;">
<li><a href="/what/we-do" style="color:white;">
<h4><i class="icon-google-plus"></i>Welcome</h4></a>
</li>
<li><a href="/about" style="color:white;">
<h4><i class="icon-google-plus"></i>About Us</h4></a>
</li>
</ul>
</nav>
<ul class="inline-list text-center pull-bottom">
<li>Google Plus</li>
<li>LinkedIn</li>
<li>Email Us</li>
</ul>
</div>
<div class="large-6 columns" style="background-color:#829EBF;">
<h3>ABOUT</h3>
<nav>
<ul style="list-style: none;">
<li>Overview</li>
</ul>
</nav>
</div>
</div>
</div>
<div style="width:67%;">
Content
<ul class="inline-list text-center pull-bottom">
<li>©2015 Goes Here</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
</body></html>
My problem is, my columns are not taking up the full-height of the screen. I thought that was the purpose of the data-equalizer attribute. Unfortunately, it looks like I was wrong. What am I doing wrong?
I've been using vh units to get this to work:
div.full-height {
min-height:100vh;
}
For our particular project it meets our requirements, which you can check for your project at Can I Use
According to the foundation docs you're supposed to use data-equalizer on the parent and then data-equalizer-watch on all the children. http://foundation.zurb.com/docs/components/equalizer.html
<div class="row" data-equalizer>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
</div>
And then don't forget to add $(document).foundation();
Edit
I misunderstood what you wanted initially. Basically you need to add several css rules of height: 100%; so that both the parents and children can expand to 100% of the screen height.
Here is an updated JSfiddle: http://jsfiddle.net/NateW/e4uqw4yq/