Bootstrap déroulant couper
Je suis en train d'ajouter une liste déroulante menu de réglage à mes commentaires de l'article dans un projet que j'ai travaillé.
Le menu déroulant semble coupé lui-même et je ne suis pas sûr pourquoi est-ce le cas.
J'ai essayé overflow:visible and z-index:999
. mais aucun d'entre eux semblent fonctionner.
C'est une base de bloc de commentaire que j'essaie d'inclure une liste déroulante dans
C'est le code de base que je suis en train de mettre en Œuvre
<div class="media">
<a class="pull-left" href="/user/{{shared_scribble.scribble.user.username}}/"><img class="media-object" src="/img.png/"></a>
<div class="dropdown pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:10px;padding: 4px 8px;">
<b data-icon=""></b> <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
<div class="media-body">
<h4 class="media-heading"><a class="username" href="/user/hi/">Test User</h4>
<p>
Main body of the comment
</p>
</div>
</div>
Et c'est ainsi que mon menu déroulant s'avère être
médias CSS
.media,
.media-body {
overflow: hidden;
*overflow: visible;
zoom: 1;
}
.media,
.media .media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
.media-object {
display: block;
}
.media-heading {
margin: 0 0 5px;
}
.media .pull-left {
margin-right: 10px;
}
.media .pull-right {
margin-left: 10px;
}
.media-list {
margin-left: 0;
list-style: none;
}
source d'informationauteur Jonathan
Vous devez vous connecter pour publier un commentaire.
Vérifier si les médias la classe est a
overflow:hidden
. Si oui, remplacez-la paroverflow: auto
ouoverflow: visible
.Ce n'est pas une solution idéale car le menu ne sera pas faites défiler jusqu'à l'élément cible, mais je suis en train de faire ce pour un défilement des données de la table en dernier ressort jusqu'à ce que je peux trouver une alternative:
Cela aura pour effet d'ajouter le menu pour le corps et le nettoyer à cacher. Je suis à l'aide de jquery UI pour le positionnement, mais vous pouvez le remplacer régulièrement jquery positionnement si vous ne voulez pas ajouter de la lourde dépendance. Vous pouvez également modifier
$(window).on
si vous ne voulez le faire à une sélection limitée de listes déroulantes.Écrire comme ceci:
Peut-être que c'est vous aider.
J'ai eu le même problème. Après l'ajout de ces lignes, ma liste déroulante travaillé comme je m'y attendais:
J'ai trouvé la solution ici
NOUVELLE MÉTHODE:
Il suffit d'apporter menu déroulant hors de la catégorie de support et d'utiliser une marge négative:
Obtenir cette très souvent sur des projets que j'ai hériter; a tendance à être un cas de l'un des parent des éléments ayant
overflow:hidden
Une fois que j'enlève ce qu'il semble fonctionner comme prévu (tant que votre conception ne s'appuie pas sur cette propriété).