Duyarlı tablo içindeki önyükleme düğmesi açılır menüsü kaydırma nedeniyle görünmüyor

Duyarlı ve kaydırma etkin olduğunda tabloların içindeki açılır düğmelerle ilgili bir sorun yaşıyorum çünkü açılır menü overflow: auto;özellik nedeniyle görünür değil . Bu daraltıldığında aşağı açılır düğme seçeneğini göstermek için bunu nasıl düzeltebilirim? Biraz jQuery kullanabilirim ancak sola-sağa kaydırmada sorun yaşadıktan sonra başka bir çözüm bulmaya karar verdim. Daha iyi anlamak için bir fotoğraf ekledim.

İşte küçük bir js keman:

Bunu kendim çözdüm ve yanıtı, aynı sorunu olan diğer kullanıcılara yardımcı olmak için kapsama koydum: Bootstrap'ta bir etkinliğimiz var ve bu etkinliği ayarlamak için kullanabiliriz, overflow: inheritancak bu, ebeveyninizde css özelliğine sahip değilseniz çalışacaktır. konteyner.

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

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

ve bu keman

info: Bu keman örneğinde garip çalışıyor ve neden emin değilim ama projemde gayet iyi çalışıyor.

Bir CSS tek çözüm taşma y-ekseni sağlamaktır.

http://www.bootply.com/YvePJTDzI0

.table-responsive {
  overflow-y: visible !important;
}

DÜZENLE

Yalnızca CSS için başka bir çözüm, görüntü alanı genişliğine dayalı olarak taşmayı duyarlı bir şekilde uygulamaktır:

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

https://www.codeply.com/go/D3XBvspns4

Referans için, 2018 ve BS4.1 kullanıyorum

data-boundary="viewport"Açılır menüyü değiştiren düğmeye (sınıfla birlikte olan dropdown-toggle) eklemeyi deneyin . Bkz https://getbootstrap.com/docs/4.1/components/dropdowns/#options

Farklı bir yaklaşım benimsemiştim, öğeyi ebeveynden ayırmıştım ve jQuery ile mutlak konuma ayarlamıştım

Çalışma JS fidle: http://jsfiddle.net/s270Lyrd/

Kullandığım JS çözümü.

//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');
    }
});

Bu çözüm benim için harika çalıştı:

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

Daha fazla ayrıntı: https://github.com/twbs/bootstrap/issues/15374

2 ¢ hızlı genel düzeltmem:

// 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);
  })
})();

Açıklamalar: Bir ".table-responsive" içinde bir açılır menü gösterildiğinde, tablonun yüksekliğini hesaplar ve menüyü görüntülemek için gereken yüksekliğe uyacak şekilde (dolgu ile) genişletir. Menü herhangi bir boyutta olabilir.

Benim durumumda, bu '.table-responsive' sınıfına sahip tablo değil, bu bir sarmalama div:

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

Yani betikteki $ table var aslında bir div! (açık olmak gerekirse ... ya da değil) :)

Not: IDE'min işlevi daraltabilmesi için onu bir işleve sarıyorum;) ama bu zorunlu değil!

Yalnızca CSS kullanan bir çözümüm var, sadece tabloya duyarlı içindeki açılır menüler için konumu göreli kullanın:

@media (max-width: 767px) {
  .table-responsive .dropdown-menu {
    position: relative; /* Sometimes needs !important */
  }
}

https://codepen.io/leocaseiro/full/rKxmpz/

Bu özellikleri tanımlayın. İyi şanslar!

data-toggle="dropdown" data-boundary="window"

Bu sorun, Bootstrap v4.1 ve sonraki sürümlerde data-boundary="viewport"( Bootstrap Dropdowns Docs )

Ancak daha önceki sürümler için (v4.0 ve altı), bu javascript pasajını mükemmel şekilde çalıştığını buldum . Küçük tablolar ve kayan tablolar için çalışır:

$('.table-responsive').on('shown.bs.dropdown', function (e) {
    var t = $(this),
        m = $(e.target).find('.dropdown-menu'),
        tb = t.offset().top + t.height(),
        mb = m.offset().top + m.outerHeight(true),
        d = 20; // Space for shadow + scrollbar.
    if (t[0].scrollWidth > t.innerWidth()) {
        if (mb + d > tb) {
            t.css('padding-bottom', ((mb + d) - tb));
        }
    }
    else {
        t.css('overflow', 'visible');
    }
}).on('hidden.bs.dropdown', function () {
    $(this).css({'padding-bottom': '', 'overflow': ''});
});

@Wazime çözümünü biraz temizledim. Genel bir çözüm olarak harika çalışıyor.

$(document).on('shown.bs.dropdown', '.table-responsive', function (e) {
    // The .dropdown container
    var $container = $(e.target);

    // Find the actual .dropdown-menu
    var $dropdown = $container.find('.dropdown-menu');
    if ($dropdown.length) {
        // Save a reference to it, so we can find it after we've attached it to the body
        $container.data('dropdown-menu', $dropdown);
    } else {
        $dropdown = $container.data('dropdown-menu');
    }

    $dropdown.css('top', ($container.offset().top + $container.outerHeight()) + 'px');
    $dropdown.css('left', $container.offset().left + 'px');
    $dropdown.css('position', 'absolute');
    $dropdown.css('display', 'block');
    $dropdown.appendTo('body');
});

$(document).on('hide.bs.dropdown', '.table-responsive', function (e) {
    // Hide the dropdown menu bound to this button
    $(e.target).data('dropdown-menu').css('display', 'none');
});

Önerilen ve seçilen çözüm her zaman en iyi çözüm değildir. Maalesef son zamanlarda kullanılan linkedin çözümü ve duruma bağlı olarak sayfada birden çok kaydırma çubuğu oluşturur.

Yöntemim biraz farklıydı.

Tabloya duyarlı div'i başka bir div'de içerdim. Sonra yükseklik% 100, genişlik:% 100, görüntü bloğu ve konum mutlakını uyguladım, böylece yükseklik ve genişlik sayfa boyutuna bağlı ve taşmayı gizli olarak ayarladım.

Ardından, duyarlı div tablosuna% 100 minimum yükseklik ekledim

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

Aşağıdaki çalışma örneğinde görebileceğiniz gibi, eklenen kaydırma çubukları yok, komik davranışlar yok ve pratikte kullanım yüzdeleri gibi - ekran boyutundan bağımsız olarak çalışmalıdır. Ancak bunu bunun için test etmedim. Bu herhangi bir nedenle başarısız olursa,% 100'ü sırasıyla 100vh ve 100vw ile değiştirebilirsiniz.

<!-- 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>

Kabul edilen cevaba ve @LeoCaseiro'nun cevabına dayanarak, burada benim durumumda kullandım:

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

büyük ekranlarda açılır menü yanıt tablosunun arkasına gizlenmeyecek ve küçük ekranda gizlenecek, ancak sorun değil çünkü yine de mobilde kaydırma çubuğu var.

Umarım bu birine yardımcı olur.

Burebistaruler yanıtı benim için ios8'de (iphone4s) iyi çalışıyor, ancak daha önce çalıştığı android üzerinde çalışmıyor. İos8 (iphone4s) ve andoir'da benim için çalışan yapmadım:

$('.table-responsive').on('show.bs.dropdown', function () {
 $('.table-responsive').css( "min-height", "400px" );
});

$('.table-responsive').on('hide.bs.dropdown', function () {
     $('.table-responsive').css( "min-height", "none" );
})

Bu başka biri için faydalı olabilir. DatatablesJS kullanıyorum. Tablonun mevcut yüksekliğine 500px ekliyorum. Bunu yapıyorum çünkü Veri Tabloları tablonuzda 10, 20 vb. Sayfaları kullanmanıza izin veriyor. Bu yüzden masanın yüksekliğini dinamik olarak hesaplamam gerekiyor.
Açılır menü gösterildiğinde ekstra yükseklik eklerim.
Açılır menü gizlendiğinde, orijinal tablonun yüksekliğini sıfırlarım.

$(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");
    })
})

Ve HTML

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

     ....
    </table>
</div>

Önce:

Açılır menü gösterildikten sonra:

Açılır menü tablonun altına yakın olduğunda açılır menüye bir .dropup sınıfı uygulayarak bu sorunu işte burada çözdük. görüntü açıklamasını buraya girin

Bu benim için Bootstrap 4'te çalıştı çünkü v3'ten farklı kesme noktaları var:

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

İnsanlar hala bu sayıya takılıp kaldıkça ve biz zaten 2020'deyiz. Açılır menüye esnek bir ekran vererek saf bir CSS çözümü elde ediyorum

bu pasaj datatable-scroll-wrapsınıfta harika çalışıyor

.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu {
    display: flex;
}
.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu li a {
    display: flex;
}

Peki, en üstteki cevabı okurken, kaydırma çubuğunu gördüğünüzde ve geçiş düğmesinin son sütunda (benim durumumda) veya görünmeyen başka bir sütunda olduğunu gördüğünüzde gerçekten çalışmadığını gördüm.

Ancak, "gizli" yerine "devralma" yı değiştirirseniz işe yarayacaktır.

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

Bu şekilde yapmaya çalışın.

Bir kez dene. İnternette 1 saatlik araştırmadan sonra bu Sorun için En İyi Çözümü buldum.

Çözüm: - sadece komut dosyası ekleyin

(function () {
    // hold onto the drop down menu                                             
    var dropdownMenu;

    // and when you show it, move it to the body                                     
    $(window).on('show.bs.dropdown', function (e) {

    // grab the menu        
    dropdownMenu = $(e.target).find('.dropdown-menu');

    // detach it and append it to the body
    $('body').append(dropdownMenu.detach());

    // grab the new offset position
    var eOffset = $(e.target).offset();

    // make sure to place it where it would normally go (this could be improved)
    dropdownMenu.css({
        'display': 'block',
            'top': eOffset.top + $(e.target).outerHeight(),
            'left': eOffset.left
       });
    });

    // and when you hide it, reattach the drop down, and hide it normally                                                   
    $(window).on('hide.bs.dropdown', function (e) {
        $(e.target).append(dropdownMenu.detach());
        dropdownMenu.hide();
    });
})();

ÇIKTI:-

Bootstrap.css içinde sonraki kodu arayın:

.fixed-table-body {
  overflow-x: auto;
  overflow-y: auto;
  height: 100%;
}

... ve bununla güncelleyin:

.fixed-table-body {
  overflow-x: visible;
  overflow-y: visible;
  height: 100%;
}

Sadece Bunu Kullanın

.table-responsive {
    overflow: inherit;
}

Chrome'da çalışır, ancak IE10 veya Edge'de çalışmaz çünkü miras özelliği desteklenmez

Benim durumumda bu iyi çalışıyor:

.table-responsive {
  overflow-y: visible !important;
}