Need help to put the sidebar in right side

Hi, I need some help I want to put my sidebar in right side,

Thank you in advance.


<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title></title>

    <!-- Bootstrap Core CSS -->
    <link href="bootstrap.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="sidebarcss.css" rel="stylesheet">

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>



    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
   <!-- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>-->
    <![endif]-->



    <script type="text/javascript">
    var map;
        function initialize(){
            google.maps.visualRefresh = true;

          var  initial =  new google.maps.LatLng(35, -105);
            map   = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 5,
                center: initial,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl:false,
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE
                },
                scaleControl: false,
                rotateControl:false,
                panControl:false

            });

        }
        google.maps.event.addDomListener(window, 'load', initialize);

    </script>



    <style>
        html, body{
            height: 100%;
            margin: 0px;
            padding: 0px;

        }


    </style>


</head>

<body >

<div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">

    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">


                            <div id="map_canvas" style="height:600px; width: 100%;"></div>

                    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                </div>
            </div>
        </div>
    </div>
    <!-- /#page-content-wrapper -->

</div>
<!-- /#wrapper -->

<script src="bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
</script>

</body>

</html>


sidbarcss.css


/*!
 * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Toggle Styles */

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    right: 0px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}


When I copy that code to my local setup, the sidebar is already on the right side? There is a 250px left gap on the page because of this rule you have set

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px; 
    }
}

The sidebar already seems to be on the right side. Did you mean the left?

If so you could move it left like this:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>

<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Custom CSS -->
<link href="sidebarcss.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
   <!-- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>-->
    <![endif]-->

<script type="text/javascript">
    var map;
        function initialize(){
            google.maps.visualRefresh = true;

          var  initial =  new google.maps.LatLng(35, -105);
            map   = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 5,
                center: initial,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl:false,
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE
                },
                scaleControl: false,
                rotateControl:false,
                panControl:false

            });

        }
        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
<style>
html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
}
/*!
 * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Toggle Styles */

#wrapper {
	padding-left: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#wrapper.toggled {
	padding-left: 250px;
}
#sidebar-wrapper {
	z-index: 1000;
	position: fixed;
	left: 0px;
	width: 0;
	height: 100%;
	overflow-y: auto;
	background: #000;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
	width: 250px;
}
#page-content-wrapper {
	width: 100%;
	padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
	position: absolute;
}
/* Sidebar Styles */

.sidebar-nav {
	position: absolute;
	top: 0;
	width: 250px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sidebar-nav li {
	text-indent: 20px;
	line-height: 40px;
}
.sidebar-nav li a {
	display: block;
	text-decoration: none;
	color: #999999;
}
.sidebar-nav li a:hover {
	text-decoration: none;
	color: #fff;
	background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
	text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
	height: 65px;
	font-size: 18px;
	line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
	color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
	color: #fff;
	background: none;
}
 @media(min-width:768px) {
#wrapper {
	padding-left: 250px;
}
#wrapper.toggled {
	padding-left: 0;
}
#sidebar-wrapper {
	width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
	width: 0;
}
#page-content-wrapper {
	padding: 20px;
}
#wrapper.toggled #page-content-wrapper {
	position: relative;
	margin-right: 0;
}
}
</style>
</head>

<body >
<div id="wrapper" class="toggled">
		
		<!-- Sidebar -->
		<div id="sidebar-wrapper"> </div>
		<!-- /#sidebar-wrapper -->
		
		<!-- Page Content -->
		<div id="page-content-wrapper">
				<div class="container-fluid">
						<div class="row">
								<div class="col-lg-12">
										<div id="map_canvas" style="height:600px; width: 100%;"></div>
										<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> </div>
						</div>
				</div>
		</div>
		<!-- /#page-content-wrapper -->
		
</div>
<!-- /#wrapper -->

<script src="bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
</script>
</body>
</html>

Not sure what you were trying to achieve on the smaller widths though.

I would have to guess he did mean left since he did allocate 250px on the left side of the page randomly. If that is the case, ignore my first post. The fix for that is easy. Make the following changes.

#sidebar-wrapper can have left:0; set instead of right:0;. Also remove the negative 250px left margin. Did you want the sidebar to appear dynamically somehow? If so, keep that margin in there and you can set it to 0 with javascript when your action is performed.

It’s already coded Ryan :slight_smile:

My code is a working demo as I linked to the bootstrap css.

@Paul O’B,@RyanReese,

I want the sidebar  on right side...Yes,the sidebar is already in the right side because I tried to edit the css to make it right,but I get into trouble the sidebar will overlap the map if it is in toggle,when the sidebar invisible,the map will not display full width.

can you help me on this please.

Thank you in advance.

if the sidebar will be visible the sidebar will overlap the map,and the map will only display half of it.but how will I do that if the sidebar will be visible the div of the map which is on the left side will adjust so that the map will display properly in the div.

Thank you in advance.

Hi,

I removed the media query because I couldn’t see why you were opening the menu in smaller screens when the opposite should be true and there doesn;t seemt obe a need for a media query anyway.

This will start with the menu hidden and then slide in from the right when needed.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>

<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Custom CSS -->
<link href="sidebarcss.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
   <!-- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>-->
    <![endif]-->

<script type="text/javascript">
    var map;
        function initialize(){
            google.maps.visualRefresh = true;

          var  initial =  new google.maps.LatLng(35, -105);
            map   = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 5,
                center: initial,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl:false,
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE
                },
                scaleControl: false,
                rotateControl:false,
                panControl:false

            });

        }
        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
<style>
html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
}
/*!
 * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Toggle Styles */

#wrapper {
	padding-left: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#wrapper{
	padding-right: 250px;
}
#sidebar-wrapper {
	z-index: 1000;
	position: fixed;
	right: 0px;
	width: 0;
	height: 100%;
	overflow-y: auto;
	background: #000;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
	width: 250px;
}
#page-content-wrapper {
	width: 100%;
	padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
	position: absolute;
}
/* Sidebar Styles */

.sidebar-nav {
	position: absolute;
	top: 0;
	width: 250px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sidebar-nav li {
	text-indent: 20px;
	line-height: 40px;
}
.sidebar-nav li a {
	display: block;
	text-decoration: none;
	color: #999999;
}
.sidebar-nav li a:hover {
	text-decoration: none;
	color: #fff;
	background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
	text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
	height: 65px;
	font-size: 18px;
	line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
	color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
	color: #fff;
	background: none;
}

#wrapper {
	padding-right: 250px;
}
#wrapper.toggled {
	padding-right: 0;
}
#sidebar-wrapper {
	width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
	width: 0;
}
#page-content-wrapper {
	padding: 20px;
}
#wrapper.toggled #page-content-wrapper {
	position: relative;
	margin-right: 0;
}

</style>
</head>

<body >
<div id="wrapper" class="toggled"> 
		
		<!-- Sidebar -->
		<div id="sidebar-wrapper"> </div>
		<!-- /#sidebar-wrapper --> 
		
		<!-- Page Content -->
		<div id="page-content-wrapper">
				<div class="container-fluid">
						<div class="row">
								<div class="col-lg-12">
										<div id="map_canvas" style="height:600px; width: 100%;"></div>
										<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> </div>
						</div>
				</div>
		</div>
		<!-- /#page-content-wrapper --> 
		
</div>
<!-- /#wrapper --> 

<script src="bootstrap.min.js"></script> 
<!-- Menu Toggle Script --> 
<script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
</script>
</body>
</html>


I’m not sure if that’s what you were aiming for though :slight_smile:

@Paul O’B,

     Yes this is what i want,thank you so much.:)

Hi @ Paul O’B,

why is it the google map if i viewed in my mobile,that map will not reponsive.If I remove the style in my #map_canvas,the map will not be shown.

Thank you in advance.

Hi,

I’m not sure what you are after but I believe this map resize function will re-center the map.

If you also want to maintain an aspect ratio of the map rather than have it always 600px high then try something like this:


<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>

<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Custom CSS -->
<link href="sidebarcss.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
   <!-- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

<style>
html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
}
/*!
 * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Toggle Styles */

#wrapper {
	padding-left: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#wrapper {
	padding-right: 250px;
}
#sidebar-wrapper {
	z-index: 1000;
	position: fixed;
	right: 0px;
	width: 0;
	height: 100%;
	overflow-y: auto;
	background: #000;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
	width: 250px;
}
#page-content-wrapper {
	width: 100%;
	padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
	position: absolute;
}
/* Sidebar Styles */

.sidebar-nav {
	position: absolute;
	top: 0;
	width: 250px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sidebar-nav li {
	text-indent: 20px;
	line-height: 40px;
}
.sidebar-nav li a {
	display: block;
	text-decoration: none;
	color: #999999;
}
.sidebar-nav li a:hover {
	text-decoration: none;
	color: #fff;
	background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
	text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
	height: 65px;
	font-size: 18px;
	line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
	color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
	color: #fff;
	background: none;
}
#wrapper {
	padding-right: 250px;
}
#wrapper.toggled {
	padding-right: 0;
}
#sidebar-wrapper {
	width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
	width: 0;
}
#page-content-wrapper {
	padding: 20px;
}
#wrapper.toggled #page-content-wrapper {
	position: relative;
	margin-right: 0;
}
#map_canvas {
	width:100%;
	padding:60% 0 0;
	position:relative;
	height:0!important;
}
.map-holder{
	position:relative	
}
@media screen and (max-width:450px){
	#menu-toggle{
		position:absolute;
		left:-2px;
		top:0;
		width:20px;
		word-wrap:break-word;
		white-space:normal;
		padding:0 5px;
	
	}	
}
text-align:center;

</style>
</head>

<body >
<div id="wrapper" class="toggled"> 
		
		<!-- Sidebar -->
		<div id="sidebar-wrapper"> </div>
		<!-- /#sidebar-wrapper --> 
		
		<!-- Page Content -->
		<div id="page-content-wrapper">
				<div class="container-fluid">
						<div class="row">
								<div class="col-lg-12 map-holder">
										<div id="map_canvas" style="height:600px; width: 100%;"></div>
										<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> </div>
						</div>
				</div>
		</div>
		<!-- /#page-content-wrapper --> 
		
</div>
<!-- /#wrapper --> 
<script type="text/javascript">
    var map;
        function initialize(){
            google.maps.visualRefresh = true;

          var  initial =  new google.maps.LatLng(35, -105);
            map   = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 5,
                center: initial,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl:false,
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE
                },
                scaleControl: false,
                rotateControl:false,
                panControl:false

            });

        }
        google.maps.event.addDomListener(window, 'load', initialize);


		google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

</script> 
<script src="bootstrap.min.js"></script> 
<!-- Menu Toggle Script --> 
<script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
</script> 
<script>

</script>
</body>
</html>


Thank you Paul O’B :slight_smile: