Menus contextuels bloqués par l'overflow d'un ancêtre

Version imprimable

2 pièce(s) jointe(s)

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:

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>

10/03/2014, 13h27
Astoumix

Bonjour,

Peux-tu mettre ton css ?

1 pièce(s) jointe(s)

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

Code:

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:

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

10/03/2014, 16h07
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.