Bootstrap déroulante du bouton à l'intérieur de réactif de table ne sont pas visibles en raison de défilement

J'ai résolu moi-même et j'ai mis la réponse dans le champ d'application pour aider les autres utilisateurs qui ont le même problème : Nous avons un événement dans le bootstrap et nous pouvons utiliser cet événement pour définir overflow: inherited mais cela fonctionnera si vous n'avez pas une propriété css sur votre conteneur parent.

$('.table-responsive').on('show.bs.dropdown', function () {
     $('.table-responsive').css( "overflow", "inherit" );
});

$('.table-responsive').on('hide.bs.dropdown', function () {
     $('.table-responsive').css( "overflow", "auto" );
})

et c'est le violon

info: Dans ce violon exemple fonctionne étrange et je ne sais pas pourquoi mais dans mon projet fonctionne très bien.

J'avais pris une approche différente, j'avais pris l'élément de la mère et le mettre à la position absolue par jQuery

De travail JS fidle:
http://jsfiddle.net/s270Lyrd/

La JS solution que j'utilise.

//fix menu overflow under the responsive table 
//hide menu on click... (This is a must because when we open a menu )
$(document).click(function (event) {
//hide all our dropdowns
$('.dropdown-menu[data-parent]').hide();
});
$(document).on('click', '.table-responsive [data-toggle="dropdown"]', function () {
//if the button is inside a modal
if ($('body').hasClass('modal-open')) {
throw new Error("This solution is not working inside a responsive table inside a modal, you need to find out a way to calculate the modal Z-index and add it to the element")
return true;
}
$buttonGroup = $(this).parent();
if (!$buttonGroup.attr('data-attachedUl')) {
var ts = +new Date;
$ul = $(this).siblings('ul');
$ul.attr('data-parent', ts);
$buttonGroup.attr('data-attachedUl', ts);
$(window).resize(function () {
$ul.css('display', 'none').data('top');
});
} else {
$ul = $('[data-parent=' + $buttonGroup.attr('data-attachedUl') + ']');
}
if (!$buttonGroup.hasClass('open')) {
$ul.css('display', 'none');
return;
}
dropDownFixPosition($(this).parent(), $ul);
function dropDownFixPosition(button, dropdown) {
var dropDownTop = button.offset().top + button.outerHeight();
dropdown.css('top', dropDownTop + "px");
dropdown.css('left', button.offset().left + "px");
dropdown.css('position', "absolute");
dropdown.css('width', dropdown.width());
dropdown.css('heigt', dropdown.height());
dropdown.css('display', 'block');
dropdown.appendTo('body');
}
});

Pour la référence, c'est 2018 et je suis en utilisant BS4.1

Essayez d'ajouter data-boundary="viewport" pour le bouton qui permet d'activer la liste déroulante (l'un avec la classe dropdown-toggle). Voir https://getbootstrap.com/docs/4.1/components/dropdowns/#options

mes 2¢ rapide correctif global:

//drop down in responsive table
(function () {
$('.table-responsive').on('shown.bs.dropdown', function (e) {
var $table = $(this),
$menu = $(e.target).find('.dropdown-menu'),
tableOffsetHeight = $table.offset().top + $table.height(),
menuOffsetHeight = $menu.offset().top + $menu.outerHeight(true);
if (menuOffsetHeight > tableOffsetHeight)
$table.css("padding-bottom", menuOffsetHeight - tableOffsetHeight);
});
$('.table-responsive').on('hide.bs.dropdown', function () {
$(this).css("padding-bottom", 0);
})
})();

Explications:
Quand un dropdown-menu à l'intérieur d'un '.table-réactif " est affichée, le calcul de la hauteur de la table et de l'étendre (avec un rembourrage) à la hauteur nécessaires à l'affichage du menu. Le menu peut être de toute taille.

Dans mon cas, ce n'est pas la table qui a le".table-réactif " la classe, c'est un emballage div:

<div class="table-responsive" style="overflow:auto;">
<table class="table table-hover table-bordered table-condensed server-sort">

De sorte que la table $var dans le script est en fait un div! (juste pour être clair... ou pas) 🙂

Remarque: j'ai l'envelopper dans une fonction, donc mon IDE peut effondrement de la fonction 😉 mais c'est pas obligatoire!!

Fortement recommandé et est la solution choisie, n'est pas toujours la meilleure solution. Malheureusement, sa la solution linkedin récemment utilisées et il crée de multiples barres de défilement sur la page en fonction de la situation.

Ma méthode est légèrement différente.

I contient la table sensibles div dans un autre div. Puis j'ai appliqué hauteur de 100%, width:100%, l'affichage du bloc et de la position absolue de sorte que la hauteur et la largeur est basé sur la taille de la page, et de définir overflow hidden.

Ensuite sur la table réactive div, j'ai ajouté un min-height de 100%

<div class="table_container" 
style="height: 100%; width: 100%; display: block;position: absolute;overflow: hidden;">
<div class="table-responsive" style="min-height:100%;">

Comme vous pouvez le voir dans l'exemple ci-dessous, sans ajout de barres de défilement, pas drôle de comportement, et pratiquement aussi son à l'aide de pourcentages - il devrait fonctionner indépendamment de la taille de l'écran. Je n'ai pas tester ce pour cela cependant. Si cela échoue pour une raison quelconque, on peut le remplacer à 100% avec 100vh et 100vw respectivement.

HTML:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="table_container" style="height: 100%; width: 100%; display: block;position: absolute;overflow: hidden;">
<div class="table-responsive" style="min-height:100%;">
<table class="table">
<thead>
<tr>
<th>Value1</th>
<th>Value2</th>
<th>Value3</th>
<th>Value4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</td>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</td>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</td>
<td>DATA</td>
</tr>
<tr>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li>                                    </ul>
</div>
</td>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</td>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</td>
<td>DATA</td>
</tr>
</tbody>
</table>
</div>
</div>

Basé sur la accepté de répondre et la réponse de @LeoCaseiro voici ce que j'ai fini par utiliser dans mon cas :

@media (max-width: 767px) {
.table-responsive{
overflow-x: auto;
overflow-y: auto;
}
}
@media (min-width: 767px) {
.table-responsive{
overflow: inherit !important; /* Sometimes needs !important */
}
}

sur les écrans géants de la liste déroulante ne seront pas cachés derrière le reponsive-table et dans le petit écran, il sera caché, mais c'est ok parce qu'il n'y est fait défiler la barre dans le mobile de toute façon.

Espère que cela aide quelqu'un.

Cela pourrait être utile pour quelqu'un d'autre. Je suis en utilisant DatatablesJS. - Je ajouter 500px à la hauteur de la table. Je le fais parce que les tables de données vous permettent d'utiliser 10, 20, etc les pages de votre table. J'ai donc besoin de calculer dinamically la table de la hauteur.

Lorsque la liste déroulante est affichée, j'ai ajouter de la hauteur.

Lorsque déroulante est invisible ils, je réinitialiser la table d'origine de la hauteur.

$(document).ready(function() {
$('.table-responsive .dropdown').on('shown.bs.dropdown', function () {
console.log($('#table-responsive-cliente').height() + 500)
$("#table-responsive-cliente").css("height",$('#table-responsive-cliente').height() + 500 );
})
$('.table-responsive .dropdown').on('hide.bs.dropdown', function () {
$("#table-responsive-cliente").css("height","auto");
})
})

Et le HTML

<div class="table-responsive" id="table-responsive-cliente">
<table class="table-striped table-hover">
....
....
</table>
</div>

Avant:

Après une liste déroulante s'affiche:

Cela a fonctionné pour moi dans le Bootstrap 4 car il y a différents points d'arrêt que la v3:

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

Simplement Utiliser Ce

.table-responsive {
overflow: inherit;
}

Il fonctionne sur Chrome, mais pas IE10 ou à Bord en raison d'hériter de biens n'est pas pris en charge