Is it possible to create a GMail/GoogleGroups-like layout using Twitter Bootstrap, so that the layout always fits to the viewport (window height) and the sidebar and content area are
separately scrollable?
--------------------------------------------------------------------------
| |
| Fixed top navbar |
--------------------------------------------------------------------------
| | |
| Sidebar | Content area scrollable |
| scrollable |
| | |
| | |
| | |
| | |
|------------------------------------------------------------------------|
You don't need to use Bootstrap to create this layout (nor do I think Bootstrap supports it, at least not without significant modification).
Of course, you can still use Bootstrap for everything else on the page. If you really want the Google Apps look, you'll need to tweak some of the default Bootstrap styles.
What's Possible
For fun, here's a quick knockoff of the Gmail interface using the basic techniques I describe below and a variety of Bootstrap components.
Demo: http://jsfiddle.net/Ly6wmyr2/1/
The code here is definitely demo quality and beyond the scope of a Stack Overflow question. I'll leave it up to the reader to dissect.
Simple Breakdown
Demo: http://jsfiddle.net/vLm26g4g/1/
Notes
We're using absolute positioning.
Just because it's absolutely positioned doesn't mean it can't be responsive (if desired).
Containers are positioned using all 4 sides inside a 100% height body.
This approach will work in all browsers IE 7+. If you can support IE8+, using box-sizing: border-box makes the dimension calculations easier.
Layouts like this really benefit from LESS CSS, as you can declare the basic sizes in a single location.
HTML {
height: 100%;
}
BODY {
position: relative;
height: 100%;
}
HEADER {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 64px;
padding: 8px;
background-color: #ddd;
}
#side {
position: absolute;
top: 80px;
left: 0;
bottom: 0;
width: 20%;
background-color: #eee;
overflow: auto;
}
#content {
position: absolute;
top: 80px;
left: 20%;
bottom: 0;
right: 0;
overflow: auto;
}
I don't think there is an out-of-the-box Bootstrap solution but with a few overrides to the Bootstrap CSS and a position:absolute container around the left side nav and *wide content are*a this should work. You'll see that both left/right spans have independent scroll bars...
Gmail-like Bootstrap Layout Demo
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<!-- top nav --->
</div>
</div>
</div>
<div class="box">
<div class="row-fluid">
<div class="column span3">
<!-- left-side nav --->
</div>
<div class="column span9">
<!-- content area --->
</div>
</div>
</div>
Add some Bootstrap CSS overrides, and tweak the .box and .column containers..
html, body {
height: 100%;
}
.row-fluid {
height: 100%;
}
.column:before, .column:after {
content: "";
display: table;
}
.column:after {
clear: both;
}
.column {
height: 100%;
overflow: auto;
}
.box {
bottom: 0; /* increase for footer use */
left: 0;
position: absolute;
right: 0;
top: 40px;
}
.span9.full {
width: 100%;
}
Here is the working Bootply: http://bootply.com/60116 (also includes the content area rows and pagination)
Check out the scaffolding section at
http://twitter.github.com/bootstrap/scaffolding.html#layouts
Specifically under the Fluid Layout/Fixed Layout sections
If you want to make the sections scrollable just add
overflow-y:auto;
to the css in your divs
that would be your code using a scrollspy to highlight the current "visibl" section in the body
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<div class="container-fluid">
<div class="row-fluid">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav affix">
<li class="active"><i class="icon-chevron-right"></i> Global styles</li>
<li><i class="icon-chevron-right"></i> Grid system</li>
<li><i class="icon-chevron-right"></i> Fluid grid system</li>
<li><i class="icon-chevron-right"></i> Layouts</li>
<li><i class="icon-chevron-right"></i> Responsive design</li>
</ul>
</div>
<div class="span9">
<section id="global"></section>
<section id="gridSystem</section>
<section id="fluidGridSystem"></section>
<section id="layouts"></section>
<section id="responsive"></section>
</div>
</div>
</div>
</body>
if you want to add a fixed navbar simply add "position:fixed" to the navbar css
Related
I am trying to have a menu that takes up 100vh when the menu button is clicked. However, I also have a header at the top so the menu content is lower than it. How do I make the menu go on top of the header? I'm trying to do this without making the header display: none because I want it to be shown on the side - in the left over space from making the menu have a view width of 80vw.
header {
height: 3.4rem;
display: grid;
align-items: center;
z-index: 1;
}
.menu {
z-index: 2;
position: relative;
background-color: #000;
margin-left: 4rem;
}
.menu-container {
width: 80vw;
height: 100vh;
margin-left: 2.5rem;
margin-top: 2rem;
}
<header>
<div class="header-container">
<div class="left">
<img src="img/logo.jpg" alt="">
</div>
<div class="right">
<img src="img/user.png" alt="">
<i class="fa-solid fa-bars fa-xl"></i>
</div>
</div>
</header>
<nav class="menu">
<div class="menu-container">
<div class="top-menu">
Premium
Support
Download
<div class="menu-line"></div>
</div>
<div class="bottom-menu">
Account
Log out
</div>
<img src="img/logo.jpg" alt="">
</div>
</nav>
(I did not add all the CSS to do with the menu and header because the rest of it is irrelevant.)
How do I move the menu to go on top?
I think position: relative is not set properly, it should only be on a parent that contains both header and nav. And then set the following css :
.menu {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 80vw;
}
Add margin and background if you want.
Now nav should be above header.
I believe the issue lies in the position and z-index of your .menu and header css. Try making the position: absolute for both absolute and change the z-index of menu to 1 and header to 2 so that it shows menu on top of header.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
I am developing a project for school and I am pretty new to Bootstrap and I keep having some problems with scaling the website for different resolutions. When I change it to mobile the images go on top of the text. If anybody could help me I would appreciate it.
I have tried everything and still cant find a solution.
<body>
<div class="container">
<nav class="navbar-fixed-top sticky-top navbar" style="width: 100%; background-color: white; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);">
<div class="navbar-header">
<a class="navbar-brand"><img src="transferir.png" alt="" style="height: 65; width: 60px"></a>
</div>
<div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Contacta-nos</li>
</ul>
</div>
</nav>
<div class="site-index">
<div id="home" class="block home-block">
<div class="container">
<div class="col-sm-6 left-block">
<div class="text-centered">
<h1>Texter</h1>
<p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
<p class="Medium-text">Download Em Breve</p>
<img src="playstore.png" alt="Playstore" class="d-img">
<img src="appstore.png" alt="Apple App Store" class="d-img">
</div>
</div>
<div class="col-sm-5 right-block">
<img src="phones.png" style="height: 350px; float: right; vertical-align: middle; width: auto !important; position: relative">
</div>
</div>
<hr class="sombra">
</div>
</div>
Css
html{
scroll-behavior: smooth;
}
body{
padding-top: 1%;
font-family: 'Lato', sans-serif;
}
.block{
padding: 35px;
}
.home-block{
min-height: calc(100vh - 90px);
}
#home .container{
height: 500px;
}
.left-block{
text-align: center;
top: 30%;
}
.right-block{
bottom: 35%;
margin-left: 25%;
}
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Desktop
When i squish the page
First of all, you probably forgot to include <div class="row"></div> wrapper inside your <div class="container">...</div> element, just as it says here.
Secondly, I strongly recommend you to not play too much with CSS properties such as position: relative/absolute, top: ...; left: ...; right: ...; bottom: ..., because most of them break the CSS native document flow and they should be used only when other tools do not help much.
I suggest you reading this series of articles if you have enough time: CSS layout
I turned off most of the properties of that kind and it already looks much nicer:
This answer would be just be a massive advice if I wouldn't provide some code help, so here it is.
Start by disabling these properties in DevTools:
.home-block{
/* min-height: calc(100vh - 90px); */
}
#home .container{
/* height: 500px; */
}
.left-block{
/* text-align: center; */
/* top: 30%; */
}
.right-block{
/* bottom: 35%; */
/* margin-left: 25%; */
}
Fixing Bootstrap markup:
<div id="home" class="block home-block">
<div class="container">
<!-- Added this wrapper, changed .col-* classes to responsive -->
<div class="row">
<!-- Removed .left-block class -->
<div class="col-sm-12 col-lg-6 left-block">
<div class="text-centered">
<h1>Texter</h1>
<p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
<p class="Medium-text">Download Em Breve</p>
<img src="playstore.png" alt="Playstore" style="height: 40px;">
<img src="appstore.png" alt="Apple App Store" style="height: 40px">
</div>
</div>
<!-- Removed .right-block class, added .text-centered class -->
<div class="col-sm-12 col-lg-6 text-centered">
<!-- Removed inline styles (bad practice), changed "height" to be an attribute -->
<img src="phones.png" height="350">
</div>
</div>
</div>
</div>
Then you would get this picture (no interval between image and the button on the top):
This one is solved by applying margin-top: ...px; to the image block, wrapped in #media query at .col-md-* resolutions and lower. For the exact values see Bootstrap grid options. For more info on applying #media queries see MDN docs
As for navigation bar, I first suggest you disabling padding-left on ul#menu element:
#menu {
padding-left: 0;
}
Although it fixes it on sm resolutions, the navigation menu still wraps under the logo on resolutions less than about 520px. I suggest you imagine what to do with this occasion in your mind or in some markup service like https://app.diagrams.net/ and then develop what you decided to.
You can use
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
See this and this
I have been reading about fixed div's within relative and absolute div's here:
Fix position of div with respect to another div
Fixed positioned div within a relative parent div
Fixed position but relative to container
And many other but none can help me to achive a behavior I have seen in few pages (blogs). I can not remember one at the moment, but here are some images to explain
View 1 & View 2
After scrolling down, the contextual menu sticks to the side of the view and moves down with the scrolling until reach the end of the section in which it stops. If there is more content after it, you can keep scrolling down but the contextual menu no longer follow your view. The same going up, you reach the section, the contextual menu follows you up until the start of the section, then stops and you can keep scrolling up.
Is this posible with only HTML and CSS or do I need a plugin?
Here is a jsFiddle piece of code, perphaps incomplete. Forgot to mention, I'm doing this in Angular 6+ as a component, so I don't have full access to the index.html file with the body tag. The jsFiddle shows what I can work with.
There were a few things going on:
You can set body { position: relative } in your CSS
position: sticky needs a full height column to work. Because your col-6 that was holding your menu was only as tall as it needed to be, it won't scroll.
I moved the p-sticky class to your column.
sticky also needs a top value to know where the element should stick to once it becomes sticky.
.p-sticky {
position: sticky;
top: 60px;
}
body {
position: relative;
}
/*some attemps*/
.p-relative {
position: relative;
}
.p-absolute {
position: absolute;
}
.p-sticky {
position: sticky;
top: 60px;
}
.p-fixed {
position: fixed;
}
/* Standar CSS*/
.navbar {
background-color: blue;
width: 100%;
}
.nav-fixed {
top: 0px;
z-index: 1;
position: fixed;
}
.content-ex1 {
height: 200px;
background-color: green;
}
.content-ex2 {
height: 500px;
background-color: #aaaaaa;
}
.menu {
height: 50px;
background-color: red;
}
<div class="navbar">
some navbar things
</div>
<div class="navbar nav-fixed">
some navbar things
</div>
<div class="content-ex1"> Some content here</div>
<div class="container">
<div class="row">
<div class="col-sm-6 p-sticky">
<div class="menu">menu or something</div>
</div>
<div class="col-sm-6 content-ex2"> Some content here</div>
</div>
</div>
<div class="content-ex1"> Some content here</div>
Here's the fiddle to play around with (which includes your bootstrap):
http://jsfiddle.net/w4mz9dte/
Note: you appear to be using an old version of BootStrap. You may want to update to the newest version. In that case, only a few things will change - namely, you move the p-sticky class to the menu.
Here's the newest version of BS 4.4: http://jsfiddle.net/kamr0bjw/
body {
position: relative;
}
/*some attemps*/
.p-relative{
position:relative;
}
.p-absolute{
position:absolute;
}
.p-sticky{
position:sticky;
top: 60px;
}
.p-fixed{
position:fixed;
}
/* Standar CSS*/
.navbar{
background-color: blue;
width:100%;
}
.nav-fixed{
top: 0px;
z-index:1;
position:fixed;
}
.content-ex1{
height:200px;
background-color: green;
}
.content-ex2{
height:500px;
background-color: #aaaaaa;
}
.menu{
height:50px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<div class="navbar">
some navbar things
</div>
<div class="navbar nav-fixed">
some navbar things
</div>
<div class="content-ex1"> Some content here</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="menu p-sticky">menu or something</div>
</div>
<div class="col-sm-6 content-ex2"> Some content here</div>
</div>
</div>
<div class="content-ex1"> Some content here</div>
I'm having a problem trying to get both a fixed top navigation and a sticky footer to work, without hiding the footer 40px off the bottom. The jquery script i'm using is meant to fix this, but it doesn't. I can't use bootstrap or anything similar. So this is my only option.
The HTML
<div id="container">
<nav role="navigation" id="cssmenu">
<ul>
<li class="active">Home</li>
<li class="has-sub">Courses
<ul>
<li><span>Digital Media</span></li>
<li><span>Web Development</span></li>
<li><span>Journalism</span></li>
<li class="last"><span>Information & Communications</span></li>
</ul>
</li>
</ul>
<div id="wrapper">
<header role="banner" id="banner">
<div class="not-fullscreen background" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_6643.jpg');" data-img-width="1600" data-img-height="1064">
<div class="content-a">
<div class="content-b">
<h1>header1</h1>
<h2>header 2</h2>
</div>
</div>
</div>
</header>
<div class="content">
<main role="main" id="skipnav">
<p>Intro paragraph</p>
</main>
</div>
</div>
<footer class="footer" id="footer">
<div class="container2">
<p>footer</p>
</div>
</footer>
</div>
The Jquery script -
$(document).ready(function(){
var footer_height=$("#footer").height();
$("#wrapper").css({
'padding-bottom' : footer_height
});
});
Css can be found here
The full website can be found here
Thanks in advance.
you can do using css only no need to use jquery
#footer {
bottom: 0;
position: fixed;
}
nav {
top : 0;
position: fixed;
}
You need to place footer inside wrapper and use position fixed for the footer instead of position absolute; Furthermore, the only reason to use jQuery to calculate the padding is if your footer does not have fixed height (now you use height: 40px). You also need to give to your wrapper padding top = height of your header.
Try this:
#footer {
position: fixed;
bottom: 0px;
width: 100%;
left: 0px;
height: auto;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
/* padding: calculated 0 calculated; */
#container {
position: relative;
width: 100%;
height: 100%;
}
Few things to change:
body was having padding-top:40px; which is making the body to overflow. So remove that padding from body.
and #wrapper need to be:
#wrapper {
position: absolute;
width: 100%;
height: 100%;
}
remove that jquery part and padding-bottom line from wrapper.
and make footer to be position: fixed;
I'm trying to build this web app thing (it'll eventually a stage/props/que management system for my community theatre group) and I've encountered quite a difficult problem. Apologies if this question has been answered before, I certainly couldn't find anything relating to this specific problem.
Here's the last two I've tried. In theory they have the best chance of working but... they aren't working.
questions/2758651/how-to-change-height-div-on-window-resize
questions/16837525/resize-div-height-with-jquery
So what I'm doing is creating a page that resizes to fit the current screen real-estate the problem I'm having is the central scrolling div and the 'sidebar's' scrolling div only scroll when they have a fixed height. Basically if I use a percentage height in my CSS it becomes the size of it's contents regardless of how overflow: scroll; is setup. I'm thinking it's got something to do with the float:left; definition on all col-*-* elements. The thing I can't fathom is that when I set the div a fixed height (say height:300px;) everything works. Hence why I'm trying JS/JQ solutions but apparently even $(window).height() is getting the document height in Chrome and not the 'viewport' height.
Here's the page as it stands with a fixed height. http://azarel-howard.me/stage-management/props-manager/ I've tried a handful of JS solutions but... they don't seem to run. Or they run into the same issues.
edit: code as requested;
<body>
<!-- Scroll block - this works with fixed height. However I NEED variable height and also WP8 IE support which just flat out doesn't work as I've discovered. (scrolling-wise that is) -->
<div class="scrollable col-lg-9" style="height: 650px; overflow-y: auto;">
<div class="container">
<!-- This scene block get's repeated for each scene -->
<div class="scene row">
<h4>Scene 1</h4>
<div class="container">
<!-- This script block get's repeated for each speakers block within the scene -->
<div class="script row col-lg-offset-1">
<div class="col-lg-2">
<h6>Speaker-1:</h6>
</div>
<div class="col-lg-10">
<p>Speaker's text</p>
</div>
</div>
<!-- End script block -->
</div>
</div>
<!-- End scene block -->
</div>
</div>
<div class="col-lg-3" style="height: 650px;">
<div class="container">
<!-- Scroll block - again this works with fixed height. -->
<div class="row" style="height: 430px; overflow-y: auto; overflow-x: hidden;">
<h5>Stage Props</h5>
<div class="row">
<div class="container">
<div class="col-lg-12">
<h6>Scene 1</h6>
</div>
</div>
</div>
</div>
<!-- Everything from here down is irrelevant for the purpose of figuring out how to have a variable height scrolling div but the presence of these elements will effect to height variables for this specific scrolling div. -->
<div class="row">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="contributor">
<img class="image-circle" style="width:100%" src="/stage-management/photo%20log/WP_20131121_004.jpg" alt>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="contributor">
<img class="image-circle" style="width:100%" src="/stage-management/photo%20log/WP_20131121_005.jpg" alt>
</div>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="row">
<button type="button" class="btn btn-default" style="width:49%;">Current Que</button>
<button type="button" class="btn btn-default" style="width:49%;">Next Que</button>
</div>
</div>
</div>
</body>
And the CSS for reference: these excerpts are extracted directly from bootstrap.css
.col-lg-9,
.col-lg-3 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-lg-9 {
width: 75%;
}
.col-lg-3 {
width: 25%;
}
#media (min-width: 768px) {
.container {
max-width: 750px;
}
}
#media (min-width: 992px) {
.container {
max-width: 970px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
Ok... I just found this which apparently should work I'm trying it now.
HTML5 Canvas 100% Width Height of Viewport?
Ok at long last I've discovered the secret to using height percentages! I'm going to answer my own question (even though I think it's somewhat bad form but anyway).
With percentages of width everything works as expected. If a relative width is defined it is based off of the parent elements width, which unless explicitly assigned, is the size forced on it by the other content inside of it (say a picture that's 200px wide).
Now it doesn't work this way with height. I decided to go back to basics with this one and concentrated on background-color div's to isolate the factor. After a bit I decided a simple google search was in order, and very quickly discovered this forum question from '08 http://forums.htmlhelp.com/index.php?showtopic=7543 and there you go.
In order to use percentage height the height of the parent element MUST be EXPLICITLY defined from the opening HTML tag all the way down to the element where it counts. With the exception of parent elements that have explicit px heights defined.
So for those of us wanting to make 'fullscreen' apps (ie those that are contained within the dimensions of the browser viewport) we need to include the following CSS code.
html, body {
height: 100%;
}
or in my case the div row elements directly under the body also need this applied so
html, body, body > div.row {
height: 100%;
}
and that will make all the difference.
Just remember that from this level down you will still need to include in-line style statements for each and every element that needs to be percentage scaled.
Assuming your HTML is something along the lines of:
<div class="sidebar">
<!-- sidebar content -->
</div>
<div class="main-content">
<!-- main content -->
</div>
You can achieve an independently scrolling sidebar with the following style declarations:
.main-content {
position: relative;
width: 75%;
}
.sidebar {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 25%;
overflow-y: scroll;
}
Here's a jsfiddle example http://jsfiddle.net/7txqj/