Discussion :

[francky74]

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 :


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 !
});

[francky74]

Bon, j'ai trouvé !

Dans le css, il faut mettre la position en relative. Par contre, sur le site internet où j'ai pris ce code, c'est en fixed et cela fonctionne donc c'est étrange ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
  .sidebar-nav{
        position:relative; 
        width:100%;
  }