Bonjour,

Je suis en train d'expérimenter une navbar verticale dont j'ai pris le code ici.
Mon problème est que cette navbar dépasse à droite de l'éran alors que sur le preview du site où je l'ai prise, celle-ci ne dépasse pas.

A la différence du site, j'ai inséré cette navbar dans un ngView, ce qui ne devrait rien changer !

Voici une copie d'écran pour illustrer mon problème, on voit les flèches côté droit qui appartiennent en fait aux navbar situé à gauche de l'écran :
Nom : sidebar.jpg Affichages : 1893 Taille : 41,8 Ko

Et voici mon code html :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<div class="row affix-row">
	<div class="col-sm-3 col-md-3 affix-sidebar">
		<div class="sidebar-nav">
			<div class="navbar navbar-default" role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<span class="visible-xs navbar-brand">Sidebar menu</span>
				</div>
				<div class="navbar-collapse collapse sidebar-navbar-collapse">
					<ul class="nav navbar-nav" id="sidenav01">
						<li class="active">
							<a href="#" data-toggle="collapse" data-target="#toggleDemo0" data-parent="#sidenav01" class="collapsed">
								<h4>
									Control Panel
									<br>
									<small>IOSDSV <span class="caret"></span></small>
								</h4>
							</a>
							<div class="collapse" id="toggleDemo0" style="height: 0px;">
								<ul class="nav nav-list">
									<li><a href="#">ProfileSubMenu1</a></li>
									<li><a href="#">ProfileSubMenu2</a></li>
									<li><a href="#">ProfileSubMenu3</a></li>
								</ul>
							</div>
						</li>
						<li>
							<a href="#" data-toggle="collapse" data-target="#toggleDemo" data-parent="#sidenav01" class="collapsed">
								<span class="glyphicon glyphicon-cloud"></span> Submenu 1 <span class="caret pull-right"></span>
							</a>
							<div class="collapse" id="toggleDemo" style="height: 0px;">
								<ul class="nav nav-list">
									<li><a href="#">Submenu1.1</a></li>
									<li><a href="#">Submenu1.2</a></li>
									<li><a href="#">Submenu1.3</a></li>
								</ul>
							</div>
						</li>
						<li class="active">
							<a href="#" data-toggle="collapse" data-target="#toggleDemo2" data-parent="#sidenav01" class="collapsed">
								<span class="glyphicon glyphicon-inbox"></span> Submenu 2 <span class="caret pull-right"></span>
							</a>
							<div class="collapse" id="toggleDemo2" style="height: 0px;">
								<ul class="nav nav-list">
									<li><a href="#">Submenu2.1</a></li>
									<li><a href="#">Submenu2.2</a></li>
									<li><a href="#">Submenu2.3</a></li>
								</ul>
							</div>
						</li>
						<li><a href="#"><span class="glyphicon glyphicon-lock"></span> Normalmenu</a></li>
						<li><a href="#"><span class="glyphicon glyphicon-calendar"></span> WithBadges <span class="badge pull-right">42</span></a></li>
						<li><a href=""><span class="glyphicon glyphicon-cog"></span> PreferencesMenu</a></li>
					</ul>
				</div><!--/.nav-collapse -->
			</div>
		</div>
	</div>
	<div class="col-sm-9 col-md-9 affix-content">
		<div>
			<h1>User's page</h1>
			<table class="table table-stripped" ng-controller="usersController">
				<thead>
					<tr>
						<td>Name</td>
						<td>Email</td>
						<td>Country</td>
						<td>Language</td>
						<td>Password</td>
						<td>RegId</td>
						<td>Actions</td>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="user in usersList">
						<td>{{user.user_name}}</td>
						<td>{{user.user_mail}}</td>
						<td>{{user.user_country}}</td>
						<td>{{user.user_language}}</td>
						<td>{{user.user_password}}</td>
						<td>{{user.user_regId}}</td>
						<td>
							<button class="btn btn-default"
							ng-click="modif_user()">Modify</button>
							<button class="btn btn-danger"
							ng-click="suppr_user()">Suppr</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

le code css :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/* make sidebar nav vertical */ 
@media (min-width: 768px){
  .affix-content .container {
    width: 700px;
  }   
 
  html,body{
    background-color: #f8f8f8;
    height: 100%;
    overflow: hidden;
  }
    .affix-content .container .page-header{
    margin-top: 0;
  }
  .sidebar-nav{
        position:fixed; 
        width:100%;
  }
  .affix-sidebar{
    padding-right:50; 
    font-size:small;
    padding-left: 0;
  }  
  .affix-row, .affix-container, .affix-content{
    height: 100%;
    margin-left: 0;
    margin-right: 0;    
  } 
  .affix-content{
    background-color:white; 
  } 
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }
  .sidebar-nav .navbar{
    border-radius:0; 
    margin-bottom:0; 
    border:0;
  }
  .sidebar-nav .navbar ul {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }  
}
 
@media (min-width: 769px){
  .affix-content .container {
    width: 600px;
  }
    .affix-content .container .page-header{
    margin-top: 0;
  }  
}
 
@media (min-width: 992px){
  .affix-content .container {
  width: 900px;
  }
    .affix-content .container .page-header{
    margin-top: 0;
  }
}
 
@media (min-width: 1220px){
  .affix-row{
    overflow: hidden;
  }
 
  .affix-content{
    overflow: auto;
  }
 
  .affix-content .container {
    width: 1000px;
  }
 
  .affix-content .container .page-header{
    margin-top: 0;
  }
  .affix-content{
    padding-right: 30px;
    padding-left: 30px;
  }  
  .affix-title{
    border-bottom: 1px solid #ecf0f1; 
    padding-bottom:10px;
  }
  .navbar-nav {
    margin: 0;
  }
  .navbar-collapse{
    padding: 0;
  }
  .sidebar-nav .navbar li a:hover {
    background-color: #428bca;
    color: white;
  }
  .sidebar-nav .navbar li a > .caret {
    margin-top: 8px;
  }  
}
acceuil.html :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>Acceuil</title>
 
	<script src="js/vendor/jquery-2.1.4.js"></script>
	<script src="js/vendor/angular.min.1.5.9.js"></script>
	<script src="js/vendor/angular-route.js"></script>
	<script src="css/vendor/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 
	<script src="js/script.js"></script>
	<script src="js/acceuilController.js"></script>
	<script src="js/articlesController.js"></script>
	<script src="js/contactController.js"></script>
 
	<link rel="stylesheet" href="css/vendor/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />
	<link rel="stylesheet" href="css/vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/style.css">
 
 
</head>
<body ng-controller="mainController">
	<!-- HEADER AND NAVBAR -->
	<header>
		<nav class="navbar navbar-default">
			<div class="container">
				<div class="navbar-header navbar-left">
					<a class="navbar-brand" href="/">Lune et jardin - admin</a>
				</div>
 
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#"><i class="glyphicon glyphicon-home" aria-hidden="true"></i> Home </a></li>
					<li><a href="#/chats"><i class="glyphicon glyphicon-comment"></i> Chats </a></li>
					<li><a href="#/chiens"><i class="glyphicon glyphicon-comment"></i> Chiens </a></li>
					<li><a href="#/users"><i class="glyphicon glyphicon-user"></i> Users </a></li>
					<li><a href="#/contact"><i class="glyphicon glyphicon-enveloppe"></i> Contact </a></li>
				</ul>
			</div>
		</nav>
	</header>
 
	<!-- SIDEBAR -->
 
 
	<!--/.nav-collapse -->
</div>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main" class="col-md-12">
	<div ng-view content="html/css/js"></div>
</div>
</body>
</html>

code javascript :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/**
 * 
 */
 
var myApp = angular.module("myApp", ["ngRoute"]);
 
myApp.config(function($routeProvider) {
	$routeProvider
 
	// route for the home page
	.when('/', {
		templateUrl : '../vues/home.html',
		controller : 'mainController'
	})
 
	// route for the about page
	.when('/about', {
		templateUrl : '../vues/about.html',
		controller : 'aboutController'
	})
 
	// route for the contact page
	.when('/contact', {
		templateUrl : '../vues/contact.html',
		controller : 'contactController'
	})
 
	// route for the contact page
	.when('/users', {
		templateUrl : 'vues/users.html',
		controller : 'usersController'
	});		
 
});
 
myApp.controller('mainController', function($scope) {
	console.log("mainController");
	$scope.message = 'Bonjour !';
});
 
myApp.controller('aboutController', function($scope, $http) {
	console.log("aboutController");
	$scope.messageList = [];
	$http.get('gestMessage').then(function(response) {
		console.log("response : " + response.data.messageList);
		$scope.messageList = response.data.messageList;
	});
});
 
myApp.controller('usersController', function($scope, $http) {
	console.log("usersController");
	$scope.usersList = [{"usersList":[{"user_id":1,"user_name":"francky","user_mail":"francky@mail","user_reg_id":"liuhqsmdihmqsdoigjh3654","user_country":3,"user_language":3,"user_latitude":12.0,"user_longitude":32.0,"user_password":"pass","user_time":1482102000000},{"user_id":2,"user_name":"Matthieu","user_mail":"matthieu@mail","user_reg_id":"g41fgh6h5f2fd2y5jh5r52","user_country":3,"user_language":3,"user_latitude":14.0,"user_longitude":22.0,"user_password":"pass","user_time":1481756400000},{"user_id":3,"user_name":"Jerome","user_mail":"jerome@mail","user_reg_id":"g41fgh6h5f2f48flkghjh5r52","user_country":3,"user_language":3,"user_latitude":14.0,"user_longitude":22.0,"user_password":"pass","user_time":1482015600000}]}];
	$http.get('gestUsers').then(function(response) {
		console.log("response : " + response.data.usersList);
		$scope.users = response.data.usersList;
	});
});
 
myApp.controller('contactController', function($scope) {
	console.log("contact controller");
	$scope.message = 'Contact page';
 
 
Merci pour vos aides !
});