On my web page sidebar appears when clicked upon a particular icon.In the sidebar-footer there is a text box whose input runs on a particular php page and output gets printed on sidebar-main. I want to fix the sidebar-header and sidebar-footer relative to sidebar (i.e., when sidebar is active).Only sidebar-main should scroll when content grows. As of now whole sidebar scrolls. Thank you in advance!
#bot {
position: fixed;
bottom: 50;
left: 10;
cursor: pointer;
}
.overlay {
/* full screen */
width: 100vw;
height: 100vh;
/* transparent black */
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
display: none;
/* middle layer, i.e. appears below the sidebar */
z-index: 9998;
}
#sidebar {
width: 350px;
position: fixed;
top: 0;
left: -350px;
height: 100vh;
z-index: 999;
background: linear-gradient(to left, #26a0da, #314755);
color: #fff;
transition: all 0.3s;
overflow-y: scroll;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#sidebar.active {
left: 0;
}
#dismiss {
position: absolute;
top: 10;
right: 20;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.glyphicon.glyphicon-remove {
font-size: 20px;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
display: none;
}
#sidebar .sidebar-header {
width: 350px;
padding: 20px;
top: 0;
background: linear-gradient(to right, #26a0da, #314755);
text-align: center;
position: absolute;
}
#sidebar .sidebar-menu {
width: 350px;
padding: 20px;
text-align: center;
#position: fixed;
}
#sidebar .sidebar-footer {
width: 350px;
padding: 20px;
bottom: 0;
background: linear-gradient(to right, #26a0da, #314755);
text-align: center;
#position: fixed;
<div class="wrapper">
<nav id="sidebar">
<!-- Close Sidebar Button -->
<div id="dismiss">
<span class="glyphicon glyphicon-remove"></span>
</div>
<!-- Sidebar Header -->
<div class="sidebar-header">
<h3>Sidebar-Header</h3>
</div>
<!-- Sidebar Main -->
<div class="sidebar-main">
<div id="result"></div>
<!-- Result comes from javascript part -->
</div>
<!-- Sidebar Footer -->
<div class="sidebar-footer">
<div id="message-box" class="col-md-5 col-md-offset-3">
<input type="text" id="message" name="message" value="" placeholder="Messages" />
</div>
</div>
</nav>
<div id="sidebarCollapse">
<img src="icon2.png" id="bot">
</div>
<div class="overlay"></div>
</div>
You may need to simplify your code to avoid including elements that are not part of the question (like the sidebar's "active" class), as your snippet doesn't actually show anything. Also using a relative path for an image on a snippet doesn't really work.
On the other hand, it is not clear if your sidebar's header and footer are meant to be fixed height or not (or the whole sidebar). In the first case, it can be handled with CSS alone as seen in this snippet.
You may want to add a container for your menu and set a fixed height for that container (screen size - header height - footer height).
HTML
<nav id="sidebar">
<div class="sidebar-header">
<!-- Header content -->
</div>
<div class="sidebar-menu">
<div class="menu-container">
<!-- Menu content -->
</div>
</div>
<div class="sidebar-footer">
<!-- Footer content -->
</div>
</nav>
CSS
#sidebar {
width:350px;
position:fixed;
left:0;
top:0;
height:100vh;
}
.sidebar-header {
height:100px;
position:relative; /* doesn't need to be absolute */
width:100%
}
.sidebar-footer {
height:100px;
position:absolute; /* the footer goes to the bottom */
bottom:0;
left:0;
width:100%
}
.menu-container {
height: calc(100vh - 200px); /* screen height - header height - footer height */
overflow: auto; /* this makes your container div to scroll if the content's overflowing */
}
If you want automatic heights for the footer or header of the sidebar (which I don't recommend), then you should set the sidebar's header and footer height from javascript and then calculate the menu container's height and set it from code.
Related
I created my custom modal with position: fixed and use this modal into content but it's not applied with respect to screen its shows position: fixed with respect to content How can I make modal in the center with respect to screen center?
modal is imported into the content.
where nav position is fixed
sidebar position is fixed
content position is relative
and modal position is already fixed but this fixed position of modal take w.r.t its parent not with body
Problem: Modal takes the fixed position with respect to its parent but I need to apply modal with respect to HTML body tag. Is there any way to apply this?
Can't put modal directly to body because it's created in such a way that where it'll put, it'll automatically used to draw w.r.to body
Also use parent selector
.overlay{
animation: ${fadeIn} 200ms ease-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
background-color: ${(props) => props.theme.palette.greyScale[9]};
}
body < parent(body) {
position:relative;
}
does not work.
Here is the structure:
I think the layout is not correct. I suggest the following layout and style.
Put everything inside a container. I have created a jsfiddle with sample layout. Please have a look. Let me know if any queries
.container {
background: lightgray;
width: 100vw;
height: 100vh;
float: left;
display: block;
position: relative;
}
.nav-bar {
widows: 100%;
height:20%;
background: gray;
}
.side-bar {
width:20%;
height: calc(100% - 20%);
float: left;
background: lightblue;
}
.content {
width: calc(100% - 20%);
background: red;
float: left;
height: calc(100% - 20%);
}
.modal {
position: fixed;
width: 200px;
height: 150px;
background: green;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
<div class="container">
<div class="nav-bar">
NavBar
</div>
<div class="side-bar">Side Bar</div>
<div class="content">
Content
<div class="modal">
Modal
</div>
</div>
</div>
I am trying to achieve roational text within the div but now able to do it.
Problem facing
rotational text should be upside down , like the text should start from bottom, tried to achieve with -90 but it is going upward and crossing the div.
no matter what the text, it should be inside the div (currently because it is absolute it is crossing the parent div and is not responsive).
Height of the text should always be 100% of parent height.
trying hard to achive this but not getting the clean solution.
.header{
width:100%;
height:30px;
background:gainsboro;
}
.footer{
width:100%;
height:30px;
background:gainsboro;
}
.floatsidebar {
clear: none;
overflow: hidden;
z-index: 99999;
}
.sidebarmain {
cursor: pointer;
border: 1px solid grey;
width: 30px;
height: 99.5%;
background: linear-gradient(to right, white, lightgrey)
}
.vertical-text {
text-align: -webkit-match-parent;
position: absolute;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: left top 0;
transform-origin: left top 0;
margin-left: 30px;
padding: 8px;
}
<div class="header">
header
</div>
<div class="floatsidebar " (click)="_toggleSidebar()">
<div class="sidebarmain ui-widget-header">
<div class="vertical-text">622 and 626 All Material Transporter (PC2269)</div>
</div>
</div>
<div class="footer">
footer
</div>
You can use writing-mode: vertical-rl or writing-mode: vertical-lr. This CSS property is also supported by all latest browser.
You can use a pseudo-element to add some padding.
header,footer {
background-color: lightgrey;
}
.vertical-text {
display: inline-block;
transform: rotate(-90deg);
}
.vertical-text:after {
content: '';
padding: 45% 0;
display: block;
position: relative;
top: 0;
}
<header>
header
</header>
<div class="vertical-text">
some vertical text
</div>
<footer>
footer
</footer>
Here is a better approach (taken from http://kizu.ru/en/fun/rotated-text/) which uses a wrapping span:
.header{
width:100%;
height:30px;
background:gainsboro;
}
.footer{
width:100%;
height:30px;
background:gainsboro;
}
.floatsidebar {
clear: none;
overflow: hidden;
z-index: 99999;
}
.sidebarmain {
cursor: pointer;
border: 1px solid grey;
width: 30px;
height: 99.5%;
background: linear-gradient(to right, white, lightgrey)
}
.rotated-text {
display: inline-block;
overflow: hidden;
width: 1.5em;
line-height: 1.5;
}
.rotated-text__inner {
display: inline-block;
white-space: nowrap;
transform: translate(0,100%) rotate(-90deg);
transform-origin: 0 0;
}
.rotated-text__inner:after {
content: "";
float: left;
margin-top: 100%;
}
<div class="header">
header
</div>
<div class="floatsidebar " (click)="_toggleSidebar()">
<div class="sidebarmain ui-widget-header">
<span class="rotated-text">
<span class="rotated-text__inner">
622 and 626 All Material Transporter (PC2269)
</span>
</span>
</div>
</div>
<div class="footer">
footer
</div>
This is what i understand from your question. If it aint what youre looking for. Please comment so i can edit on it.
EDIT
Added jquery to calc the min height of the sidebar
vertTop = $('.vertical-text').width();
vertTop = vertTop + 60;
$(".sidebarmain").css('height', $('.vertical-text').width());
$('.vertical-text').css('top', vertTop);
.header {
width: 100%;
height: 30px;
background: gainsboro;
}
.footer {
width: 100%;
height: 30px;
background: gainsboro;
}
.floatsidebar {
clear: none;
overflow: hidden;
z-index: 99999;
}
.sidebarmain {
cursor: pointer;
border: 1px solid grey;
width: 30px;
padding: 10px 0;
background: linear-gradient(to right, white, lightgrey)
}
.vertical-text {
text-align: -webkit-match-parent;
position: absolute;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: left top 0;
transform-origin: left top 0;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
header
</div>
<div class="floatsidebar " (click)="_toggleSidebar()">
<div class="sidebarmain ui-widget-header">
<div class="vertical-text">622 and 626 All Material Transporter (PC2269)</div>
</div>
</div>
<div class="footer">
footer
</div>
How do I prevent text from collapsing on a side menu closing. Check out the codepen and you will see that the menu items/text collapse on top of each other when the menu is closed. I've tried overflow hidden on the menu items but that did not work. Any ideas?
see codepen: https://codepen.io/zepzia/pen/vpZQxz
<header>
<div class="container-fluid">
<div class="row">
<nav class="navbar bg-faded fixed-top" id="slide-nav">
<div class="nav-wrapper">
<div class="nav-logo">
<span class="navbar-text menu-toggle" onclick="openNav()"><i class="fa fa-bars" aria-hidden="true"></i></span>
</div>
<div id="mySidenav" class="sidenav">
×
<br>
<br>
Home
This Is Link One
This Is Link Two
This Is Link Three
This IsLink Three
Link Three
</div>
</div>
</nav>
</div>
</div>
</nav>
</header>
/* NAVIGATION */
.menu-toggle {
cursor:pointer;
float:right;
line-height: 60px;
}
.fa-bars {
color: #fff;
font-size: 30px;
}
.nav-wrapper {
width: 83%;
margin: 0 auto;
}
.navbar {
height: 75px;
background-color: gray;
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background:rgba(75,156,211,0.9) url('../img/unc_pine_cb.svg') no-repeat;
background-size: 200%;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
overflow: hidden;
}
/* The navigation menu links */
.sidenav a {
padding: 15px 8px 10px 32px;
text-decoration: none;
font-size: 25px;
color: #fff;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #13284a;
font-weight: 600;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
left: 0;
font-size: 36px;
}
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "400px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
// FADE OUT ON SCROLL DOWN
$(window).scroll(function(){
$(".fade-to-top").css("opacity", 1 - $(window).scrollTop() / 350);
});
One solution is to change the right attribute instead of the width. So instead you would set the start of the sidebar to right: -400px and change it to right: 0px when the button is clicked. Then reverse when you close the menu.
see my codepen here
This way the text will never collapse.
My question is about placing a div with position: fixed inside of a div with position: static.
I have a few websites where I fix the header to the top of the window. I also have a parallax effect. I used javascript to allow me to add a class to the header so that it shrinks and changes the opacity on scrolling.
Here's the javascript, layout, and CSS:
$(function () {
$("#Page").scroll(function () {
if ($("#Page").scrollTop() > 0)
$("#header").addClass("scrolled");
else
$("#header").removeClass("scrolled");
});
});
<div id="Page">
<div id="pre-header"></div>
<header id="header" class="">
<div class="page-width">
<div class="logo"></div>
<nav class="navigation-bar"> </nav>
</div>
</header>
</div>
#Page {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 100mm;
perspective-origin: top right;
position: static;
}
#header {
padding-top: 34px;
padding-bottom: 34px;
background-color: rgba(255, 255, 255, 0.2);
height: 110px;
position: fixed;
width: 100%;
margin-top: 36px;
z-index: 1;
pointer-events: none;
transition: background .8s;
}
My problem is that I need the header to still float at the top, even after Page has been scrolled.
Thanks for your help.
I want to keep the sticky header to remain at the top of my #main div.
Here is my js fiddle link. Even in responsive mode. I tried below code but its not working.
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome";
#import "navbar";
body,
html {
height: 100%;
overflow: hidden;
position: relative;
}
body {
padding: 10px;
}
.row-offcanvas {
height: 100%;
padding: 5% 0px 5% 0px;
}
#sidebar {
width: inherit;
min-width: 220px;
max-width: 220px;
background-color: black;
float: left;
height: 100%;
position: relative;
overflow: hidden;
}
#main {
height: 200px;
overflow-y: auto;
overflow-x: hidden;
background-color: white;
}
#sticky {
background-color: green;
}
/*
* off Canvas sidebar
* --------------------------------------------------
*/
#media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
width: calc(100% + 230px);
margin-top: 35px;
}
.visible-xs {
padding-top: 10px;
}
.row-offcanvas-left {
left: -230px;
}
.row-offcanvas-left.active {
left: 0;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
}
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet" />
<div class="row-offcanvas row-offcanvas-left">
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<h2>
Sidebar
</h2>
</div>
</div>
<div id="main">
<div id="sticky">
sticky header
</div>
<div class="col-md-12">
<p class="visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"><i class="glyphicon glyphicon-chevron-left"></i></button>
</p>
<div class="row">
<h2>
main content
<br/> main content
<br/> main content
<br/>main content
<br/>main content
<br/>main content
<br/>main content
<br/>main content
<br/>
</h2>
</div>
</div>
</div>
</div>
<!--/row-offcanvas -->
Could anyone help me? Appreciate your help in advance.
Thanks
Add below CSS to id #sticky
position: fixed;
width: 100%;
z-index: 99;
While resizing output window - sticky header width is varying. I want to make that stick with main content.I mean the sticky div must fit along with main div.