Tombol bootstrap drop-down di dalam tabel responsif tidak terlihat karena scroll

88

Saya memiliki masalah dengan tombol drop-down di dalam tabel saat responsif dan scroll aktif karena drop-down tidak terlihat karena overflow: auto;properti. Bagaimana cara memperbaikinya untuk menampilkan opsi drop-down tombol saat ini diciutkan? Saya dapat menggunakan beberapa jQuery tetapi setelah saya memiliki masalah dengan scroll ke kiri-kanan jadi saya memutuskan untuk mencari solusi lain. Saya telah melampirkan foto untuk lebih memahami.masukkan deskripsi gambar di sini

Ini biola js kecil:

javascript jquery css twitter-bootstrap overflow BurebistaRuler
sumber

Jawaban:

60

Saya memecahkan sendiri ini dan saya meletakkan jawabannya dalam ruang lingkup untuk membantu pengguna lain yang memiliki masalah yang sama: Kami memiliki acara di bootstrap dan kami dapat menggunakan acara itu untuk mengatur overflow: inherittetapi ini akan berfungsi jika Anda tidak memiliki properti css pada orang tua Anda wadah.

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

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

dan ini biolanya

info: Dalam contoh biola ini berfungsi aneh dan saya tidak yakin mengapa tetapi dalam proyek saya berfungsi dengan baik.

BurebistaRuler
sumber
3
Ini hanya berfungsi untuk tabel dengan dropdown di sel pertama baris.
Almino Melo
6
dalam kasus tabel yang dimuat dinamis: $('body') .on('show.bs.dropdown', '.table-responsive', function () { $(this).css("overflow", "visible"); }) .on('hide.bs.dropdown', '.table-responsive', function () { $(this).css("overflow", "auto"); });
Exlord
4
Tetapi setelah diklik, data keluar dari ukuran minimum layar. Jadi ini tidak berhasil. !!!!
Shreya Shah
1
Ini akan berfungsi jika Anda dapat menghentikan tabel dari menggulir kembali ke kiri saat dropdown dibuka. Tetapi sebagaimana adanya, jika Anda memiliki dropdown di sebelah kanan layar, tabel tersentak ke kiri saat membuka. Dropdown yang berada jauh ke kanan (ditutupi oleh .table-responsivekelas) benar-benar tersembunyi saat mencoba mengeditnya.
Ponyboy
43

Sebuah hanya CSS solusi adalah untuk memungkinkan sumbu y meluap.

http://www.bootply.com/YvePJTDzI0

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

EDIT

Solusi satu-satunya CSS adalah menerapkan luapan secara responsif berdasarkan lebar viewport: 

@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

Zim
sumber
@ZimSystem Masih melakukan hal yang sama, pada dasarnya ini bukanlah solusi.
Jemar Jones
Solusi ini berfungsi bahkan jika Anda menghapus css kustom. Mungkin itu hal html. Saya masih mencari solusi khusus css.
Fernando
1
Tidak. Tidak berhasil. Saya rasa itu karena saya menggunakan tabel data
peterchaula
berfungsi untuk saya kecuali tombolnya ada di bagian bawah halaman ... lalu dropdown muncul di luar jendela ...
Brucie Alpha
34

Sebagai referensi, ini 2018 dan saya menggunakan BS4.1

Coba tambahkan data-boundary="viewport"ke tombol yang mengaktifkan dropdown (yang ada di kelas dropdown-toggle). Lihat https://getbootstrap.com/docs/4.1/components/dropdowns/#options

Ben
sumber
4
Saya mengonfirmasi bahwa ini adalah solusi yang berhasil saya buat juga.
sdvnksv
4
Saya tidak dapat berbicara untuk versi sebelumnya, tetapi untuk Bootstrap 4 ini benar-benar solusi terbaik. Sederhana, tidak mengorbankan daya tanggap, ia menggunakan fungsionalitas yang sudah disediakan dalam kerangka alih-alih mencoba meretasnya dengan gaya atau skrip tambahan.
T. Linnell
16

Saya telah mengambil pendekatan yang berbeda, saya telah melepaskan elemen dari induknya dan mengaturnya dengan posisi absolute oleh jQuery

Bekerja fidle JS: http://jsfiddle.net/s270Lyrd/

masukkan deskripsi gambar di sini

Solusi JS yang saya gunakan. 

//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');
    }
});
Wazime
sumber
1
Jawaban ini adalah perbaikan sempurna bagi saya saat menggunakan jquery datatable (ajax render). Saya menyesuaikannya dan itu berfungsi dengan baik.
13

Solusi ini bekerja sangat baik untuk saya:

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

Detail lebih lanjut: https://github.com/twbs/bootstrap/issues/15374

pham cuong
sumber
11

2 ¢ perbaikan global cepat saya:

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

Penjelasan: Ketika menu dropdown di dalam '.table-responsive' ditampilkan, ia menghitung tinggi tabel dan meluaskannya (dengan padding) agar sesuai dengan ketinggian yang diperlukan untuk menampilkan menu. Menu bisa dalam berbagai ukuran.

Dalam kasus saya, ini bukan tabel yang memiliki kelas '.table-responsive', ini adalah div pembungkus:

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

Jadi $ table var di skrip sebenarnya adalah div! (hanya untuk memperjelas ... atau tidak) :)

Catatan: Saya membungkusnya dalam sebuah fungsi sehingga IDE saya dapat menciutkan fungsi;) tetapi itu tidak wajib!

BaltazarQc
sumber
2
Ini adalah satu-satunya solusi yang berhasil untuk saya, tetapi saya akan menyarankan menggunakan $ table.css ("padding-bottom", menuOffsetHeight - tableOffsetHeight + 16); insetad dari $ table.css ("padding-bottom", menuOffsetHeight - tableOffsetHeight); untuk menambahkan bantalan ekstra yang ada di bootstrap secara default, ditambah celah kecil di bagian bawah.
Phil Young
Ini berfungsi, tetapi bantalannya membuatnya terlihat buruk. Berharap ada solusi yang membuatnya bekerja tanpa bantalan yang membengkak.
Qasim
solusi yang bagus dan sederhana
NMC
11

Saya memiliki solusi hanya dengan menggunakan CSS, cukup gunakan relatif posisi untuk dropdown di dalam tabel-responsif:

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

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

Leo Caseiro
sumber
1
ini adalah solusi terbaik, saya menggunakannya untuk ui-pilih di tabel responsif saya.
Sergio Ivanuzzo
Solusi terbaik juga untuk saya
Mauro
2
Ini biola tidak bekerja . Itu terus menyembunyikan dropdown di bawah tabel.
HelloIT
@HelloIT coba codepen (diperbarui) codepen.io/leocaseiro/pen/rKxmpz
Leo Caseiro
1
Setuju dengan @hellioIT metode ini tampaknya tidak berfungsi di pena
MrPaulDriver
9

Tentukan properti ini. Semoga berhasil!

data-toggle="dropdown" data-boundary="window"
Halit Yeşil
sumber
3
Solusi khusus bootstrap 4
nevada_scout
6

Ini telah diperbaiki di Bootstrap v4.1 dan yang lebih baru dengan menambahkan data-boundary="viewport"( Bootstrap Dropdowns Docs )

Tetapi untuk versi sebelumnya (v4.0 dan yang lebih lama), saya menemukan potongan javascript ini yang berfungsi dengan sempurna. Ini berfungsi untuk tabel kecil dan tabel gulir:

$('.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': ''});
});
Cyrus V.
sumber
4

Sedikit membersihkan solusi @Wazime. Berfungsi bagus sebagai solusi umum.

$(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');
});
gempa
sumber
2

Solusi yang direkomendasikan dan dipilih, tidak selalu merupakan solusi terbaik. Sayangnya itu adalah solusi linkedin yang baru-baru ini digunakan dan itu membuat beberapa scrollbar pada halaman berdasarkan situasinya.

Metode saya sedikit berbeda.

Saya berisi div responsif tabel di div lain. Kemudian saya menerapkan tinggi 100%, lebar: 100%, blok tampilan dan posisi absolut sehingga tinggi dan lebar didasarkan pada ukuran halaman, dan mengatur overflow menjadi tersembunyi.

Kemudian pada tabel responsive div saya menambahkan min-height 100%

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

Seperti yang Anda lihat pada contoh kerja di bawah ini, tidak ada bilah gulir tambahan, tidak ada perilaku lucu, dan praktis sebagai persentase penggunaannya - ini harus berfungsi terlepas dari ukuran layar. Saya belum menguji ini untuk itu. Jika gagal karena suatu alasan, seseorang dapat mengganti 100% dengan 100vh dan 100vw.

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

Bruce
sumber
Bukan solusi untuk ketinggian tampilan yang lebih kecil. Tautan tarik-turun yang lebih rendah tidak lagi dapat dijangkau karena tidak terlihat.
Seika85
1

Berdasarkan jawaban yang diterima dan jawaban dari @LeoCaseiro, inilah yang akhirnya saya gunakan dalam kasus saya:

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

di layar besar, dropdown tidak akan disembunyikan di belakang tabel-reponif dan di layar kecil akan disembunyikan tetapi tidak apa-apa karena ada scroll bar di ponsel.

Semoga ini bisa membantu seseorang.

medBouzid
sumber
0

Respons Burebistaruler berfungsi baik untuk saya di ios8 (iphone4s) tetapi tidak bekerja di android yang sebelumnya berfungsi. Apa yang saya lakukan yang bekerja untuk saya di ios8 (iphone4s) dan andoir adalah:

$('.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" );
})
Oscar Jofre
sumber
0

Ini bisa berguna untuk orang lain. Saya menggunakan DatatablesJS. Saya menambahkan 500px ke ketinggian tabel saat ini. Saya melakukan ini karena Datatables memungkinkan Anda untuk menggunakan 10, 20, dll halaman dalam tabel Anda. Jadi saya perlu menghitung ketinggian meja secara dinamis.
Saat dropdown ditampilkan, saya menambahkan tinggi ekstra.
Saat dropdown disembunyikan, saya mengatur ulang tinggi tabel asli.

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

Dan HTML

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

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

Sebelum: masukkan deskripsi gambar di sini

Setelah dropdown ditampilkan: masukkan deskripsi gambar di sini

miguel.angel
sumber
0

Kami memecahkan masalah ini di sini di tempat kerja dengan menerapkan kelas .dropup ke dropdown saat dropdown dekat dengan bagian bawah tabel. masukkan deskripsi gambar di sini

roshin jose
sumber
Saya sangat senang dengan solusi itu pada akhirnya. $('table tr:nth-last-child(-n+3) td').addClass('dropup').
Furgas
0

Ini berfungsi untuk saya di Bootstrap 4 karena memiliki breakpoint yang berbeda dari v3:

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

Selama orang masih terjebak dalam masalah ini dan kita sudah berada di tahun 2020. Saya mendapatkan solusi CSS murni dengan memberikan menu drop-down tampilan yang fleksibel

potongan ini berfungsi baik dengan datatable-scroll-wrapkelas

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

Nah, membaca jawaban teratas, saya melihat bahwa itu benar-benar tidak berfungsi ketika Anda melihat bilah gulir dan tombol sakelar ada di kolom terakhir (dalam kasus saya) atau kolom lain yang tidak terlihat

pic-error

Tapi, jika Anda mengubah 'mewarisi' menjadi 'tersembunyi' itu akan berhasil.

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

masukkan deskripsi gambar di sini

Coba lakukan seperti itu.

Luís Gustavo Batista
sumber
0

Coba sekali. setelah 1 jam penelitian di internet saya menemukan Solusi Terbaik untuk Masalah ini.

Solusi: - cukup tambahkan skrip

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

KELUARAN:- Larutan

Patel keras
sumber
-1

Di dalam bootstrap.css cari kode berikutnya:

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

... dan perbarui dengan ini:

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

Cukup Gunakan Ini

.table-responsive {
    overflow: inherit;
}

Ini berfungsi di Chrome, tetapi tidak pada IE10 atau Edge karena properti warisan tidak didukung

Deepak swain
sumber
-1

Dalam kasus saya, ini berfungsi dengan baik:

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