ปุ่ม Bootstrap แบบเลื่อนลงภายในตารางตอบสนองไม่สามารถมองเห็นได้เนื่องจากการเลื่อน

ฉันมีปัญหากับปุ่มแบบเลื่อนลงในตารางเมื่อมีการตอบสนองและเลื่อนใช้งานอยู่เนื่องจากไม่สามารถมองเห็นดรอปดาวน์ได้เนื่องจากoverflow: auto;คุณสมบัติ ฉันจะแก้ไขได้อย่างไรเพื่อแสดงตัวเลือกแบบเลื่อนลงของปุ่มเมื่อสิ่งนี้ถูกยุบ ฉันสามารถใช้ jQuery ได้บ้าง แต่หลังจากที่ฉันมีปัญหาในการเลื่อนไปทางซ้าย - ขวาฉันจึงตัดสินใจหาวิธีอื่น ฉันได้แนบรูปถ่ายเพื่อความเข้าใจที่ดีขึ้น

นี่คือซอ js ขนาดเล็ก:

ฉันแก้ไขสิ่งนี้ด้วยตัวเองและฉันใส่คำตอบในขอบเขตเพื่อช่วยเหลือผู้ใช้รายอื่นที่มีปัญหาเดียวกัน: เรามีเหตุการณ์ใน bootstrap และเราสามารถใช้เหตุการณ์นั้นเพื่อตั้งค่าoverflow: inheritแต่จะได้ผลหากคุณไม่มีคุณสมบัติ css ในผู้ปกครองของคุณ ภาชนะ

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

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

และนี่คือซอ

info: ในตัวอย่างซอนี้ใช้งานได้แปลกและฉันไม่แน่ใจว่าทำไม แต่ในโครงการของฉันทำงานได้ดี

CSS เพียงการแก้ปัญหาคือการอนุญาตให้แกน y จะล้น

http://www.bootply.com/YvePJTDzI0

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

แก้ไข

วิธีแก้ปัญหาเฉพาะของ CSS อีกวิธีหนึ่งคือการปรับใช้โอเวอร์โฟลว์ตามความกว้างของวิวพอร์ต:

@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

สำหรับการอ้างอิงมันเป็นปี 2018 และฉันใช้ BS4.1

ลองเพิ่มdata-boundary="viewport"ปุ่มที่สลับเมนูแบบเลื่อนลง (ปุ่มที่มีคลาสdropdown-toggle) ดูhttps://getbootstrap.com/docs/4.1/components/dropdowns/#options

ฉันใช้แนวทางที่แตกต่างออกไปฉันได้แยกองค์ประกอบออกจากผู้ปกครองและตั้งค่าด้วยตำแหน่งที่แน่นอนโดย jQuery

การทำงาน JS fidle: http://jsfiddle.net/s270Lyrd/

โซลูชัน JS ที่ฉันใช้

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

วิธีนี้ใช้ได้ผลดีสำหรับฉัน:

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

รายละเอียดเพิ่มเติม: https://github.com/twbs/bootstrap/issues/15374

การแก้ไขปัญหาระดับโลกอย่างรวดเร็ว 2 ¢ของฉัน:

// 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: เมื่อเมนูแบบเลื่อนลงภายใน '.table-responsive' ปรากฏขึ้นระบบจะคำนวณความสูงของตารางและขยาย (พร้อมช่องว่างภายใน) เพื่อให้ตรงกับความสูงที่ต้องการเพื่อแสดงเมนู เมนูสามารถมีขนาดใดก็ได้

ในกรณีของฉันนี่ไม่ใช่ตารางที่มีคลาส ".table-responsive" แต่เป็น div การตัด:

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

ดังนั้น $ table var ในสคริปต์จึงเป็น div! (เพื่อความชัดเจน ... หรือไม่) :)

หมายเหตุ: ฉันรวมไว้ในฟังก์ชันเพื่อให้ IDE ของฉันสามารถยุบฟังก์ชัน;) แต่ไม่บังคับ!

ฉันมีวิธีแก้ปัญหาโดยใช้ CSS เท่านั้นเพียงแค่ใช้ตำแหน่งที่สัมพันธ์กันสำหรับดรอปดาวน์ภายในตารางตอบสนอง:

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

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

กำหนดคุณสมบัตินี้ โชคดี!

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

สิ่งนี้ได้รับการแก้ไขแล้วใน Bootstrap v4.1 ขึ้นไปโดยการเพิ่มdata-boundary="viewport"( Bootstrap Dropdowns Docs )

แต่สำหรับเวอร์ชันก่อนหน้า (v4.0 และต่ำกว่า) ฉันพบข้อมูลโค้ดจาวาสคริปต์ที่ทำงานได้อย่างสมบูรณ์ ใช้งานได้กับตารางขนาดเล็กและตารางเลื่อน:

$('.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 เล็กน้อย ใช้งานได้ดีเหมือนโซลูชันทั่วไป

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

ทางออกที่แนะนำและเลือกไม่ใช่ทางออกที่ดีที่สุดเสมอไป น่าเสียดายที่เป็นโซลูชันที่เชื่อมโยงในการใช้งานเมื่อเร็ว ๆ นี้และสร้างแถบเลื่อนหลายแถบบนหน้าตามสถานการณ์

วิธีการของฉันแตกต่างกันเล็กน้อย

ฉันมี div ที่ตอบสนองต่อตารางใน div อื่น จากนั้นฉันใช้ความสูง 100% ความกว้าง: 100% บล็อกการแสดงผลและตำแหน่งสัมบูรณ์ดังนั้นความสูงและความกว้างจึงขึ้นอยู่กับขนาดหน้าและตั้งค่าส่วนเกินเป็นซ่อน

จากนั้นบนตาราง responsive div ฉันเพิ่มความสูงขั้นต่ำ 100%

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

ดังที่คุณเห็นในตัวอย่างการทำงานด้านล่างไม่มีแถบเลื่อนเพิ่มไม่มีพฤติกรรมตลกและใช้งานได้จริงโดยไม่คำนึงถึงขนาดหน้าจอ อย่างไรก็ตามฉันยังไม่ได้ทดสอบสิ่งนี้ หากล้มเหลวด้วยเหตุผลบางประการเราสามารถแทนที่ 100% ด้วย 100vh และ 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>

จากคำตอบที่ยอมรับและคำตอบของ @LeoCaseiro นี่คือสิ่งที่ฉันใช้ในกรณีของฉัน:

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

บนหน้าจอขนาดใหญ่รายการแบบเลื่อนลงจะไม่ถูกซ่อนไว้ด้านหลังตาราง reponsive และในหน้าจอขนาดเล็กมันจะถูกซ่อนไว้ แต่ก็โอเคเพราะมีแถบเลื่อนในมือถืออยู่แล้ว

หวังว่านี่จะช่วยใครสักคน

การตอบสนองของ Burebistaruler ใช้งานได้ดีสำหรับฉันบน ios8 (iphone4s) แต่ไม่ได้ woks บน Android ที่ก่อนหน้านี้ใช้งานได้ สิ่งที่ฉันทำได้สำหรับฉันบน ios8 (iphone4s) และ andoir คือ:

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

สิ่งนี้อาจเป็นประโยชน์สำหรับคนอื่น ฉันใช้ DatatablesJS ฉันเพิ่ม 500px ให้กับความสูงปัจจุบันของตาราง ฉันทำสิ่งนี้เพราะ Datatables อนุญาตให้คุณใช้ 10, 20 ฯลฯ เพจในตารางของคุณ ดังนั้นฉันต้องคำนวณความสูงของตารางแบบไดนามิค
เมื่อแสดงแบบเลื่อนลงฉันจะเพิ่มความสูงพิเศษ
เมื่อดร็อปดาวน์ซ่อนฉันจะรีเซ็ตความสูงของตารางเดิม

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

และ HTML

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

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

ก่อน:

หลังจากแสดงรายการแบบเลื่อนลง:

เราแก้ไขปัญหานี้ในที่ทำงานโดยใช้คลาส. dropup กับดรอปดาวน์เมื่อดรอปดาวน์อยู่ใกล้กับด้านล่างสุดของตาราง ป้อนคำอธิบายภาพที่นี่

สิ่งนี้ใช้ได้กับฉันใน Bootstrap 4 เนื่องจากมีเบรกพอยต์ที่แตกต่างจาก v3:

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

ตราบเท่าที่ผู้คนยังคงติดอยู่ในปัญหานี้และเราอยู่ในปี 2020 แล้ว ฉันได้รับโซลูชัน CSS ที่แท้จริงโดยให้เมนูแบบเลื่อนลงแสดงผลแบบยืดหยุ่น

ตัวอย่างข้อมูลนี้ใช้งานได้ดีกับdatatable-scroll-wrapชั้นเรียน

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

เมื่ออ่านคำตอบด้านบนฉันเห็นว่ามันใช้ไม่ได้จริงๆเมื่อคุณเห็นแถบเลื่อนและปุ่มสลับอยู่ในคอลัมน์สุดท้าย (ในกรณีของฉัน) หรือคอลัมน์อื่นที่มองไม่เห็น

แต่ถ้าคุณเปลี่ยน "สืบทอด" เป็น "ซ่อน" ก็จะใช้ได้

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

ลองทำวิธีนั้นดู

ลองดูสักครั้ง หลังจากการวิจัยทางเน็ต 1 ชั่วโมงฉันพบทางออกที่ดีที่สุดสำหรับปัญหานี้

วิธีแก้ไข: -เพียงแค่เพิ่มสคริปต์

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

เอาท์พุท: -

ภายใน bootstrap.css ค้นหารหัสถัดไป:

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

... และอัปเดตด้วยสิ่งนี้:

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

เพียงใช้สิ่งนี้

.table-responsive {
    overflow: inherit;
}

ทำงานบน Chrome แต่ไม่ใช่ IE10 หรือ Edge เนื่องจากไม่รองรับคุณสมบัติการสืบทอด

ในกรณีของฉันมันใช้งานได้ดี:

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