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="&#xe001;"></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

Bootstrap déroulant couper

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

  1. 17

    Vérifier si les médias la classe est a overflow:hidden. Si oui, remplacez-la par overflow: auto ou overflow: visible.

  2. 15

    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:

    (function() {                                             
  var dropdownMenu;                                     
  $(window).on('show.bs.dropdown', function(e) {        
    dropdownMenu = $(e.target).find('.dropdown-menu');
    $('body').append(dropdownMenu.detach());          
    dropdownMenu.css('display', 'block');             
    dropdownMenu.position({                           
      'my': 'right top',                            
      'at': 'right bottom',                         
      'of': $(e.relatedTarget)                      
    })                                                
  });                                                   
  $(window).on('hide.bs.dropdown', function(e) {        
    $(e.target).append(dropdownMenu.detach());        
    dropdownMenu.hide();                              
  });                                                   
})();

    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.

  3. 7

    Écrire comme ceci:

    .media,
.media-body {
  overflow: visible;
}

.media:after,
.media-body:after{
 content:'';
 clear:both;
 display:block;
}

    Peut-être que c'est vous aider.

  4. 2

    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:

    @media (max-width: 767px) {
    .table-responsive .dropdown-menu {
        position: static !important;
    }
}

@media (min-width: 768px) {
    .table-responsive {
        overflow: visible;
    }
}

    J'ai trouvé la solution ici

  5. 1

    NOUVELLE MÉTHODE:

    Il suffit d'apporter menu déroulant hors de la catégorie de support et d'utiliser une marge négative:

     <div class="dropdown pull-right" style="margin-left:-30px">
     ...
 </div>

 <div class="media">
     ...
 </div>
  6. 0

    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é).