I started React based application and i have a ant-design a basic layout with top navbar, sidebar, footer and content area, my code is as following.
<Layout>
<Header>
<TopNavBar/>
</Header>
<Layout>
<Sider className='sider'>
<div >
side nav
</div>
</Sider>
<Content>main content</Content>
</Layout>
<Footer>Footer</Footer>
</Layout>
I want to get a result similar to the representation below, with a sidebar who fill whole available page height
I tried to add the following cCSS class to my sider
.sider {
min-height: 100vh;
position: relative;
z-index: 10;
}
without getting what I want, my sidebar is bigger than available space it's scrolling,the height that exceeds is the height of my header and footer.
I also tried with flexbox but without success, there is any clean way to get the desired result? I thought to do this using the javascript to calculate the available height and set the CSS class.
you can try this code
.menu-style {
overflow: auto;
height: 100vh;
width: 200px;
position: fixed;
left: 0;
background-color: #393f4a;
z-index: 3 ;
border-right : 0;
}
Related
I am runnning across an issue in which I am not sure how to solve.
I have a grid system doing the following, BUT I will do a standard "div" solution. But here is my dilemna.
I have a "LogoComponent" That displays my companies logo on the left, and a partner's logo on the right.
I have two headers that display in two different conditions.
Centered Display (just the logos)
Left Aligned Display (left aligned logos, with other content on the right)
Caveats: the "partner logo" needs to confine within the div/space as sometimes the svg's are large, so I "can" offer a height, but not a width.
The image shows the two views. The "LogoComponent" I am having an issue as I was using a flexbox, but not sure that is gonna work since why I try to make it "left" as a component, it moves off the container div. Any ideas how to solve this?
I can solve it, but I feel it will be too generalized, as I'm looking to make this "LogoComponent" be wide enough for the logos, and then appropriately resize if the partner logo is there or not.
As said in the comment, you can center LogoComponent using margin: 0 auto; when it's the :only-child.
If it's not the only child, using margin-right: auto; will push all other content to the right as we are in a flex container.
.parent {
display: flex;
}
.LogoComponent {
margin-right: auto;
}
.LogoComponent:only-child {
margin: 0 auto;
}
/* for styling only */
.LogoComponent {
width: 50px;
height: 50px;
background-color: lightblue;
}
/* for styling only */
.OtherContent {
min-width: 200px;
background-color: lightgreen;
}
<div class="parent">
<div class="LogoComponent"></div>
</div>
<hr>
<div class="parent">
<div class="LogoComponent"></div>
<div class="OtherContent"></div>
</div>
I'm having trouble with the responsive design of a footer with reactstrap. Given below is the code snippet for the footer.
const Styles=styled.div`
.navbar{
background-color: black;
width: 100%;
}
`;
const Column = styled.div`
display: flex;
flex-direction: column;
margin: 10px 30px auto 30px;
`;
const Line = styled.hr`
border: solid 1px grey;
width: 700px`;
const Footer = () =>{
return(
<Styles>
<Navbar className="navbar-fixed-bottom">
<Container className="justify-content-center">
<Row>
.
.
.
</Row>
<Row><Line/></Row>
</Container>
<Container className="justify-content-center"><Row><HeadingList>© CEC CSE Department</HeadingList></Row></Container>
</Navbar>
</Styles>
)
}
The above code works fine if there's enough content to fit the page. But if there is not, then the below problem occurs
As it's evident from the picture, there's so much white space below the footer. How can I solve this issue? I've tried overriding the CSS position to sticky with bottom 0, but it creates problem when there's more than enough content to fit the page.
Some other responsive solutions are much appreciated.
I'm doing SPA wherein I've sticky header and a half background image with 3 cards (having a title and image) on, the only thing I'm being stuck is when, I scroll down the top image must have transitioned. when the page is getting scrolled the background image should appear in that much of image transition. when I scroll back up the image must do transition expanding itself and hiding the background image.
post.scss:
#import '../scss/common.scss';
.container{
background-image: url("../images/bg2.jpg") ;
height:80%;
//background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.header{
// background-color: $primary-background;
padding: 10px 16px;
// color: #f1f1f1;
height: 50px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 100px;
}
.blank{
height: 800px;
}
post.js:
import React from 'react';
import TitleContainer from '../container/titleContainer';
import './post.scss';
import Cards from '../container/cards';
import imgT from '../images/city1.jpg';
class Post extends React.Component{
constructor(props) {
super(props);
this.state={
}
this.header = React.createRef();
}
handscroll=(e)=>{
const node = this.header.current;
let sticky=node.offsetTop
//console.log(node)
// console.log(sticky)
if (window.pageYOffset > sticky) {
node.classList.add("sticky");
} else {
node.classList.remove("sticky");
}
// console.log(e)
}
componentDidMount(){
window.addEventListener('scroll',this.handscroll)
}
render(){
return(
<div className="container" >
<div className="header" ref={this.header}>
<TitleContainer title="World Top Cities"/>
</div>
<div className="content">
<Cards title="t1" cntryImg={imgT} />
<Cards title="t2" cntryImg={imgT} />
<Cards title="t3" cntryImg={imgT} />
<div className="blank"></div>
</div>
</div>
)
}
}
export default Post;
card.scss:
%common-all{
width: 100%;
}
//border:1px solid #80808040;
//height:250px;
// border-radius: 0 0 15px 15px ;
#mixin commonFn($border,$height,$borderRadius){
border:$border;
height:$height;
border-radius: $borderRadius ;
}
.container3{
#extend %common-all;
// border-radius: 40px;
margin-top:3%;
.title{
#extend %common-all;
#include commonFn(1px solid #80808040,50px,15px 15px 0 0);
background-color: white;
}
.cntryImg{
#extend %common-all;
#include commonFn(0,250px,0 0 15px 15px)
}
}
cards.js:
import React from 'react';
import '../scss/cards.scss'
class Cards extends React.Component{
constructor(props){
super(props)
}
render(){
return(
<div className="container3">
<div className="title">
{this.props.title}
</div>
< div className="cntryImg1">
<img src={this.props.cntryImg} alt="noImg" className="cntryImg"/>
</div>
</div>
)
}
}
export default Cards;
I don't know where I'm going wrong, I do have any much no idea how do I approach it. when the page is getting scrolled down the background image should appear in that much of image transition (here image transists). When I scroll back up the image must do transition expanding itself and hiding the background image.
Please help I'm stuck past two days. Let me know if I'm not clear. Please help me on how doing it.
Updated
No, not height theirs half background image, out of 3 "containers3"(cards) 2 "containers3"(cards) covering the background image one is white background when I scroll down there should be transition effect the suppose 10px (just for ex) I scroll only that many pixels transition must happen for that particular card (not hidden at once transition effect way of hiding and showing background image when scroll up or down respectively) and background image for that particular 10px must be shown, position must not change. (here theirs transition way of hiding and showing background image)
I am trying to add a banner above my fixed-top navbar. I have looked around and understand some basic concepts on how to do this but my example is a little more complex and I am getting a little lost.
User can add a custom banner to the top of my page. If this happens I need to push everything (including the fixed navbar) down the height of the banner (say 20 px).
I have created a class that I can apply to the nav element:
.top-banner-nav {
top: 20px;
}
Navbar:
<nav class="navbar navbar-default navbar-fixed-top" ng-class="{'top-banner-nav': banner == true}">
That works great to push the static navbar down 20px if there is a banner. However I have to problems.
When you have a static navbar like this you have to add a top padding to the body to push the body content below the banner. Now all of the sudden I would need to push the body content down 70px. Not sure if there is a good way to make this happen dynamically.
I have another static navbar directly underneath the very top navbar. When I move the very top navbar down 20px I need to move this other navbar down 20px as well. Unfortunately this lower nav is fixed as well with top: 50px to place it right below the upper navbar.
I have a plunker here that demonstrates the problem. And I am not really sure where to go from here. Might have to mess with things in javascript, but I would like to try and avoid that is at all possible to avoid things jumping around on page load.
http://plnkr.co/edit/DYYMz1?p=preview
I looked at your plunker. I made some changes to your CSS and HTML to accomplish what you are looking for. The change I made to the HTML was the body tag. The new tag looks like this:
<body ng-controller="MainController" ng-class="{'bodyModified': banner == true}">
The new CSS file looks like this:
body {
padding-top: 50px; Need this to move down body under fixed header
}
.bodyModified {
padding-top: 20px;
}
.settings-nav {
position: relative;
right: 0;
left: 0;
background-color: #E2E2E2;
z-index: 1029;
top:0px;
}
.settings-content {
padding-top: 70px;
}
.top-banner-nav {
position: relative;
margin: 0;
height: 20px;
}
.top-banner {
position: fixed;
right: 0;
left: 0;
top:0;
margin-bottom: 0px;
background-color: #FFFF00;
}
You can also use javascript and jQuery to accomplish this as well. Hope that helps. Let me know how it goes.
Here is a plunker demonstrating the changes
http://plnkr.co/edit/39LhQA2gdMremnTOGXe4?p=preview
you can try jquery solution for this.for example if you are using top-nav-fixed-banner class you can code something like this.
function fixBannerHeight(){
var bannerHeight = $(".top-banner-div").height();
$(".top-nav-fixed-banner").each(function(e){
var height = $(this).height();
bannerHeight = bannerHeight + height;
})
$('.top-banner-div').css({"height":bannerHeight+"px"});
}
call fixBannerHeight() when you are adding dynamically banner.
Hope this helps.
Edited; see bottom of post
I have a layout that works perfectly in everything except Internet Explorer 7.
I have a container div that has a width and hasLayout (I've tried zoom and various other things that ought to set this, but nothing changes). Inside are three floated elements, one left and two right. Below them is an element that is clear: both and it actually is doing that, but the container is ending at the shorter float even when I set a height for it including a height taller than the originally/naturally taller one.
Here's what it looks like: http://tinypic.com/r/ea3vpy/8
It should look exactly like that, except with the two elements that are awkwardly not in the layout inside the content area.
I've tried adding empty divs with clear: both, I've tried clearfixes, I've tried floating the container. I even added a container around the two right floating divs and floated that instead of them, but it didn't change anything. Overflow is not really an option because then I have to either cut off the content or have scroll bars inside the layout.
Here's the relevant CSS:
#content {
width: 669px;
height: 100%;
padding: 20px;
padding-top: 0;
position: relative;
display: table-cell;
vertical-align: top;
background-color: #F7F8F7;
text-align: left;
}
#content { /* To make it play nice with the sidebar */
_width: 709px;
*display: inline;
*position: absolute;
*left: 0;
*zoom: 1;
}
p#indexwelcome {
max-width: 330px;
min-height: 440px;
float: left;
}
#dogimg {
width: 323px;
max-width: 100%;
height: 246px;
margin-left: 10px;
float: right;
}
#loginbox {
max-width: 323px;
margin: 20px 0;
padding: 10px;
position: relative;
float: right;
}
#itemsbox { /* the one with the bananas */
width: 644px;
height: 142px;
margin-top: 20px;
position: relative;
clear: both;
}
And the HTML:
<div id="content">
<h1>Heading</h1>
<p id="indexwelcome">Text paragraphs here</p>
<img src="images/dog.jpg" id="dogimg" alt="dog" />
<div id="loginbox">
<p>Login box stuff</p>
</div> <!-- loginbox div -->
<div id="itemsbox">
<!-- banana images here -->
</div> <!-- itemsbox div -->
</div> <!-- content div -->
EDIT: So I fixed the issue although it's not quite ideal. Setting the content and sidebar to height: auto (as opposed to height: 100%) made them expand for their content.
However that page container (the green space) still won't expand even with height: auto. I have to set a specific min-height or height, which isn't great because the page content is dynamic, so other pages have extra space if their content is shorter than what it's set for and it'll be the same original problem if the content is larger. And then of course the content and sidebar boxes still aren't the same length (but that's a whole other issue).
Here's the page CSS:
#page {
width: 1025px;
height: 100%;
min-height: 650px;
margin: 15px auto;
padding: 10px 0;
position: relative;
background-color: #7B9F73;
*min-height: 990px;
}