Bootstrap Off Canvas Show Full Height

Question

I am trying to use Bootstrap off canavas left side bar to toggle on small devices.

here is the bootply code example:

www.bootply.com/C2wQEkdSAn

The p

Answer 1

I was trying to achieve the same thing you were. Here is how I solved it.

Basically I think the difference is that I change the position of both the .row-offcanvas and .sidebar-offcanvas in the CSS. I set the left and right to 0 on the .sidebar-offcanvas.active

$(document).ready(function() {
	$('[data-toggle=offcanvas]').click(function() {
		$('.row-offcanvas').toggleClass('active');
		$('.sidebar-offcanvas').toggleClass('active');
		return false;
	});
});

/**
 * 	Base structure
 */
body {
	overflow-x:hidden;
	padding-top:50px;
}

/**
 * 	Top navigation
 */
.navbar-fixed-top {
	border:0;
}
.sidebar-offcanvas {
	background-color:#f5f5f5;
	border-right:1px solid #eee;
	bottom:0;
	display:block;
	left:0;
	position:fixed;
	overflow-x:hidden;
	overflow-y:auto;
	top:50px;
	transition:all .25s ease-in-out;
	width:250px;
	z-index:1000;
}
.main {
	left:250px;
	padding:20px;
	padding-left:40px;
	padding-right:40px;
	position:absolute;
	width:calc(100% - 250px);
}
.main .page-header {
	margin-top:0;
}
@media screen and (max-width: 768px) {
	.main {
		left:0;
		padding:20px;
		position:relative;
		width:100%;
	}
	.row-offcanvas {
		position:relative;
		transition:all .25s ease-in-out;
	}
	.row-offcanvas-right {
		right:0;
	}
	.row-offcanvas-left {
		left:0;
	}
	.row-offcanvas-right .sidebar-offcanvas {
		right:-250px;
	}
	.row-offcanvas-right .sidebar-offcanvas.active {
		right:0;
	}
	.row-offcanvas-left .sidebar-offcanvas {
		left:-250px;
	}
	.row-offcanvas-left .sidebar-offcanvas.active {
		left:0;
	}
	.row-offcanvas-right.active {
		right:250px;
	}
	.row-offcanvas-left.active {
		left:250px;
	}
	.sidebar-offcanvas {
		display:block;
		position:fixed;
		width:250px;
	}
}

	

		

			
				Toggle navigation
				
				
				
			
			Project name
		
		

			

				
Settings
				
Profile
				
Help
				
 Sign out
			
			

				
			
		
	


	

		

			

				
 Dashboard (current)
				
 Reports
				
 Analytics
				
 Export
				

				
 Users
				
 Groups
				
 Permissions
			
		
		

			
Header
			
Toggle nav