Discussion :

[kap]

Bonjour à tous,

J'ai un soucis avec l'affichage de menus contextuels avec la librairie Bootstrap. J'ai plusieurs (nombre indéterminé) éléments qui s'affichent dans une même div. Cette div a une hauteur fixe pour ne pas dépasser de l'écran. J'ai donc mis un overflow-y: auto sur cette div. Chaque élément de la div a un menu contextuel. J'aimerais que ce menu déborde en largeur (cf fichier joints ce que je veux et ce que j'obtiens). Avez-vous une idée de comment m'y prendre?

Voici un extrait du 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
<div id="layers">                
	<div class="well well-small"> 
		<div class="row-fluid" id="layer_136">atm bnpp
			<div class="btn-group pull-right open">
				<button class="btn" data-toggle="button">
					<i class="icon-eye-open"></i>
				</button>
				<a class="btn dropdown-toggle" data-toggle="dropdown">
					<span class="caret"></span>
				</a>
				<ul class="dropdown-menu dropdown-menu-layer">
					<li><a tabindex="-1" role="button">Center</a></li>
					<li class="divider"></li>
					<li><a tabindex="-1" role="button" data-toggle="modal">Unique Symbol</a></li>
					<li><a tabindex="-1" role="button" data-toggle="modal">Values</a></li>
					<li><a tabindex="-1" role="button" data-toggle="modal">Heatmap</a></li>
				</ul>
			</div>
		</div>
	</div> 
</div>

[Astoumix]

Bonjour,

Peux-tu mettre ton css ?

[kap]

J'ai attaché mon fichier css. Les parties normelement concernées sont :

Code :

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

1
2
3
4
5
6
7
#layers>.well{
    overflow-y: auto;
}
 
.dropdown-menu-layer{
    left:0px !important;
}

Le fichier css bootstrap dépasse les limites autorisés. Vous pouvez le télécharger ici Sinon un petit extrait (non exhaustif) des classes utilisées:

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
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well-small {
  padding: 9px;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

[Astoumix]

En déplacant ta div qui contient la class btn-group et en la mettant en position absolute, tu obtiens le positionnement que tu souhaites.
Par contre, tu ne souhaites peut-être pas déplacer ta div à l'extérieur du row...

http://codepen.io/anon/pen/gnwzD
J'ai rajouté un col-lg-6 pour mieux se rendre compte.