How to keep sidebar layout fixed, not scrollable with bootstrap? - javascript

I am trying to make a simple admin panel. I added a sidebar as layout. I want to keep it fixed. But when I scroll down the page my sidebar also scrolls down. Here is how it looks at the beginning of page:
And when I scroll down the page:
I want to keep it as in picture 1 even the page is scrolled down. The beginning of siderbar is like this:
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar" style="max-height:100%">
Edit: I tried .navbar-nav { position: fixed; left: 0; top: 0; bottom: 0, width: 150px; } and result is:

Try this way
<div class="container-fluid">
<div class="row">
<div class="col-md-3 px-1 bg-dark position-fixed">
...
</div>
<div class="col-md-offset-3 col-md-9 col-sm-12">
<h1>Main Area</h1>
...
</div>
</div>
</div>

Related

Using <a/> tag with a sticky navbar takes me to the wrong place

So I have a <Navbar/> custom Component in React with the following CSS
.navbar-container {
background-color: #111d5e;
display: flex;
position: sticky;
top: 0;
height: 10vh;
width: 100%;
}
And I have some sections on the same page, and the Navbar holds links to those sections like this: Projects. The problem is, when I click on the Projects link, it takes me to the Projects section, but it scrolls a bit too far down, and hides the "Projects" title behind the sticky navbar.. How do I fix this?
App.js - here you can see my Navbar and my sections
<div className="main">
<Navbar />
<div className="content">
<section id="home">
<h1>Home</h1>
</section>
<section id="about-me">
<h1>About me</h1>
</section>
<section id="projects">
<h1>Projects</h1>
</section>
<section id="contact">
<h1>Contact</h1>
</section>
</div>
<div style={{ height: 700 }}></div>
</div>
And this is the Navbar itself:
<div className="navbar-container">
<div className="navbar-name-flex">
<h1>Page Name</h1>
</div>
<div className="navbar-links-flex">
Home
About me
Projects
Contact
</div>
</div>
you should put a span tag inside title with the proper id.
<h3><span id="one"></span>one</h3>
Now use 2 lines of CSS to position them properly.
h3{ position:relative; }
h3 span{ position:absolute; top:-200px;}
Change the top value to match the height of your fixed header (or more). Now I assume this would work with other elements as well.

Bootstrap 4 sticky-top margin-top

I have element sidebar and div with class sticky-top:
<div class="row">
<div class="col-lg-4">
<div class="sticky-top">
....
</div>
</div>
</div>
I need pass a margin, when sidebar is sticky, because class sticky-top doesn't have a margin-top.
How I can write margin when sidebar is sticky?
Try:
.sticky-top { top: 0.5em; }
You need to use top instead of margin-top
<div class="row">
<div class="col-lg-4">
<div class="sticky-top" style="top: 30px">
....
</div>
</div>
</div>
Try to use:
.sticky-top{
margin-top:10px;
}
if it gives you trouble, you can force it with !important, like this:
.sticky-top{
margin-top:10px !important;
}
Please note that !important should be used only when other solutions are not working.
Hope it help!

position().left isn't giving the expected value

In the employee section of a Wordpress site, I'm trying to have the bio slide open in the correct position when you click on each employee photo.
It's working well when the row is full width (4 columns) and in mobile (1 column) but in the 2 column layout (480px to 882px), position().left is returning 0, so the negative margin isn't being properly applied and the bio goes offscreen.
I can't for the life of me figure out why this is... Any help is greatly appreciated!
The site in question: http://contractor-marketing.website/
The HTML (simplified):
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
</div>
The JS:
jQuery('.column').each(function(s, el) {
jQuery(this).find('.bio-full').eq(0).css('margin-left',-(jQuery(el).position().left));
});
Check my example below. Although I took a different approach, it essentially does what you want, and it even animates the element transition.
NOTE: This animation will happen EACH time you press the animate button. You must prevent such animation from happening more than once (if that is the behavior you are looking for). Also, change the $('#animate') selector and click event to the event of your choice.
$('#animate').click(function() {
$(".bio-full").animate({
left: "+=300",
}, 1000, function() {
// Animation complete.
});
});
body{
padding:0;
margin:0;
}
.bio-full{
background-color: red;
display:hidden;
position:relative;
width:300px;
left:-300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="animate">Animate</button>
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
</div>
I hope this helps!
Cheers!

display a webpage in to 3 vertical sections with ability to move and stretch the menus

I am creating a web page with 3 vertical templates. I used bootstrap grids and the grids are fixed but I want to strech them .Is there any way to do in Angular js and bootstrap.
Here is my code:
<body ng-controller="MenuController as menuCtrl">
<div class="row no-gutter">
<div class=" col-lg-3 mainmenu">
<h1> main menu </h1>
</div>
<div class="col-lg-3 secondmenu">
<h1> second menu </h1>
</div>
<div class="col-lg-6 thirdmenu">
<h1> detailed view </h1>
</div>
</div>
</body>
here is my css file is:
.row.no-gutter [class*='col-']:not(:first-child),.row.no-gutter [class*='col-']:not(:last-child) {
padding-right:0;
padding-left:0;
}
/* only for column content visible */
.col-lg-1>div {
background-color:#ddd;
}

Mansonry layout responsive gutter

I'm trying to make a mansonry-like layout but with elements that have responsive sizes. The sizes are limited though, they can only be multiples of the smalles rectangle. The idea is that I can have 1x1, 1x2, 2x2, 2x1 elements that fit the best place possible in the page.
I saw some questions like this before but the answer was always something unuseful like 'use bootstrap'. I tried bootstrap grid, skeleton grid and many other already. None of them can handle elements that overlap columns.
I'm using Mansonry js library now, and I'm almost there. There is only one glitch that I'm not beeing able to solve. Mansonry for some reason doesn't like when I make a 2x2 element. It breaks the gutter (even when I include the exact gutter size in the elements width).
Things to note, I'm using a variable (percetage) element width and a height based on that width.
My test html part:
<div class="container">
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<!-- Exemplo divisão -->
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item grid-item--width2"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
</div>
</div>
My css:
.container {
margin-left: auto;
margin-right: auto;
width: 90%;
}
.grid-sizer,
.grid-item {
width: 33%;
background-color: #666;
margin-bottom: 0.20%;
margin-top: 0%;
}
.gutter-sizer { width: 0.5%; }
.grid-item:before{
content:"";display:block;padding-top:50%;
}
.grid-item--width2{
width: 66.5%;
background-color: #555;
}
This is getting me: http://s23.postimg.org/knxbt44xn/gutter.png
Hello, myself.
I solved it. I tested: Masonry, Nested, Skeleton, Boostrap, (Doing manually), (some cms plugins)...
Finally, the answer was: Freewall.
https://github.com/kombai/freewall
This plugin solves nesting and gutter both vertically and horizontally. If you set widths and heights in proportion, it just works. Actually according to my tests, it works with anything you set. Has tons of options too. I love it!
<div class="container">
<div id="freewall">
<!-- Exemplo divisão -->
<div class="brick"> </div>
<div class="brick two"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
<div class="brick tall"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
</div>
</div>
My final js:
// jQuery
$(document).ready(function() {
var wall = new freewall("#freewall");
wall.reset({
selector: '.brick',
cellW: 320,
cellH: 160,
fixSize: 0,
gutterX: 5,
gutterY: 5,
onResize: function() {
wall.fitZone();
}
});
$(window).trigger("resize");
});
The css just sets the width to 33% (66% on wide), and height to 50% on normal and 100% on tall (heighs based on width using padding top).

Categories