स्‍क्रॉल की वजह से दिखाई नहीं देने वाली संवेदनशील तालिका में बूटस्ट्रैप बटन ड्रॉप-डाउन

Question

जब मैं उत्तरदायी हो तो टेबल के अंदर ड्रॉप-डाउन बटन के साथ एक समस्या है और सक्रिय स्क्रॉल करें क्योंकि overflow: auto;संपत्ति के कारण ड्रॉप-डाउन दिखाई नहीं देता है । जब यह ढह जाता है तो मैं ड्रॉप-डाउन विकल्प दिखाने के लिए उसे कैसे ठीक कर सकता हूं? मैं कुछ jQuery का उपयोग कर सकता हूं, लेकिन बाद में मुझे बाएं-दाएं स्क्रॉल करने में समस्या है, इसलिए मैंने एक और समाधान खोजने का फैसला किया। मैंने बेहतर समझने के लिए एक फोटो संलग्न किया है।

यहाँ एक छोटा सा js fiddle है:

Answer 1

मैंने इसे स्वयं हल किया और मैंने अन्य उपयोगकर्ता की मदद करने के लिए उत्तर को गुंजाइश में रखा, जिसमें एक ही समस्या है: हमारे पास बूटस्ट्रैप में एक ईवेंट है और हम उस ईवेंट को सेट करने के लिए उपयोग कर सकते हैं, overflow: inheritलेकिन यह आपके माता-पिता की सीएसएस संपत्ति नहीं होने पर काम करेगा कंटेनर।

$('.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: इस फिडेल उदाहरण में अजीब काम करता है और मुझे यकीन नहीं है कि क्यों लेकिन मेरी परियोजना में बस ठीक काम करता है।

Comments

यह केवल पंक्ति के पहले सेल पर ड्रॉपडाउन के साथ तालिकाओं के लिए काम करता है।

— अल्मिनो मेलो

डायनामिक लोड टेबल के मामले में: $('body') .on('show.bs.dropdown', '.table-responsive', function () { $(this).css("overflow", "visible"); }) .on('hide.bs.dropdown', '.table-responsive', function () { $(this).css("overflow", "auto"); });

— एक्सलॉर्ड

लेकिन क्लिक के बाद डेटा स्क्रीन के न्यूनतम आकार के बाहर चला जाता है। तो यह काम नहीं करता है। !!!!

— श्रेया शाह

यह तब काम करेगा जब आप ड्रॉपडाउन खुलने पर टेबल को बाईं ओर स्क्रॉल करने से रोक सकते हैं। लेकिन जैसा कि, अगर आपके पास स्क्रीन के दाईं ओर ड्रॉपडाउन होता है, तो खुलते समय टेबल बाईं ओर झटका देती है। ड्रॉपडाउन जो दाईं ओर ( .table-responsiveकक्षा द्वारा नकाबपोश ) हैं, उन्हें संपादित करने की कोशिश करते समय पूरी तरह से छिपे हुए हैं।

— पोनबॉय

Answer 2

एक सीएसएस केवल समाधान वाई-अक्ष को अतिप्रवाह करने की अनुमति देता है।

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

Comments

@ZimSystem फिर भी यही काम करता है, यह मूल रूप से समाधान नहीं है।

— जेमर जोन्स

यदि आप कस्टम css को हटा देते हैं तो भी यह समाधान काम करता है। शायद यह एक html बात है। मैं अभी भी एक सीएसएस-केवल समाधान की तलाश में हूं।

— फर्नांडोफ

नहीं। काम नहीं करता। मुझे लगता है कि यह इसलिए है क्योंकि मैं डेटा-तालिकाओं का उपयोग कर रहा हूं

— पीटरचूला

मेरे लिए काम करता है सिवाय बटन के पेज के निचले हिस्से पर ... फिर खिड़की के बाहर ड्रॉपडाउन दिखाई देता है ...

— ब्रूकी अल्फा

Answer 3

संदर्भ के लिए, यह 2018 है और मैं BS4.1 का उपयोग कर रहा हूं

data-boundary="viewport"उस बटन को जोड़ने का प्रयास करें जो ड्रॉपडाउन (कक्षा के साथ एक dropdown-toggle) को जन्म देता है । Https://getbootstrap.com/docs/4.1/compenders/dropdowns/#options देखें

Comments

मैं इस बात की पुष्टि करता हूं कि मैं एक काम कर रहा समाधान हूं।

— sdvnksv 14

मैं पहले संस्करणों के लिए बात नहीं कर सकता, लेकिन बूटस्ट्रैप 4 के लिए यह वास्तव में सबसे अच्छा समाधान है। यह सरल है, यह जवाबदेही का त्याग नहीं करता है, यह कार्यक्षमता का उपयोग करता है जो पहले से ही फ्रेमवर्क में प्रदान किया गया है इसके बजाय इसे अतिरिक्त शैलियों या स्क्रिप्ट के साथ हैक करने की कोशिश कर रहा है।

— टी। लिननेल

Answer 4

मैंने एक अलग दृष्टिकोण लिया, मैंने मूल से तत्व को अलग कर दिया था और इसे jQuery द्वारा निरपेक्ष स्थिति के साथ सेट कर दिया था

वर्किंग जेएस फ़िडल: http://jsfiddle.net/s270Lyrd/

जेएस समाधान मैं उपयोग कर रहा हूं।

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

Comments

यह उत्तर मेरे लिए एकदम सही फिक्स है, जबकि jquery डेटेबल (ajax रेंडर) का उपयोग करते हुए। मैंने तदनुसार समायोजित किया और यह बहुत अच्छा काम करता है।

Answer 5

इस समाधान ने मेरे लिए बहुत काम किया:

@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

Answer 6

मेरा 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);
  })
})();

संकेत: जब एक '.table-उत्तरदायी' के अंदर एक ड्रॉपडाउन-मेनू दिखाया जाता है, तो यह तालिका की ऊंचाई की गणना करता है और मेनू को प्रदर्शित करने के लिए आवश्यक ऊंचाई से मिलान करने के लिए इसे (गद्दी के साथ) विस्तारित करता है। मेनू किसी भी आकार का हो सकता है।

मेरे मामले में, यह वह तालिका नहीं है जिसमें '.table- उत्तरदायी' वर्ग है, यह एक रैपिंग डिव है:

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

तो स्क्रिप्ट में $ तालिका संस्करण वास्तव में एक div है! (बस स्पष्ट होना ... या नहीं) :)

नोट: मैं इसे एक फ़ंक्शन में लपेटता हूं ताकि मेरी आईडीई फ़ंक्शन को ध्वस्त कर सके;) लेकिन यह अनिवार्य नहीं है!

Comments

यह एकमात्र समाधान है जो मेरे लिए काम करता है, लेकिन मैं $ table.css ("पैडिंग-बॉटम", मेनूऑफ़सेटहाइट - टेबलऑफ़सेटहाइट + 16) का उपयोग करने का सुझाव दूंगा; $ table.css का इनसेट ("पैडिंग-बॉटम", मेनूऑफ़सेटहाइट - टेबलऑफ़सेटहाइट); डिफ़ॉल्ट रूप से बूटस्ट्रैप पर अतिरिक्त पैडिंग जोड़ने के लिए, और सबसे नीचे एक छोटा सा गैप।

— फिल यंग

यह काम करता है, लेकिन पैडिंग खराब दिखता है। काश कोई ऐसा उपाय होता, जो बिना पैडिंग ब्लोट के काम करता।

— कासिम

अच्छा और सरल उपाय

— NMC

Answer 7

मेरे पास केवल CSS का उपयोग करके एक समाधान है, बस तालिका-उत्तरदायी के अंदर ड्रॉपडाउन के सापेक्ष स्थिति का उपयोग करें:

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

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

Comments

यह सबसे अच्छा समाधान है, मैं अपनी उत्तरदायी तालिका में ui-select के लिए इसका उपयोग कर रहा हूं।

— सर्जियो इवानुज़ो

मेरे लिए भी सबसे अच्छा समाधान

— मूरो

यह फिडल काम नहीं करता है । यह टेबल के नीचे ड्रॉपडाउन को छुपाता रहता है ।

— हैलो

@HelloIT कोडपेन (अपडेटेड) codepen.io/leocaseiro/pen/rKxmpz

— सिंह केसिरो

@HellioIT से सहमत यह पद्धति कलम में काम नहीं करती है

— MrPaulDriver

Answer 8

इस गुण को परिभाषित करें। शुभ लाभ!

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

Comments

बूटस्ट्रैप 4 एकमात्र समाधान

— nevada_scout

Answer 9

यह बूटस्ट्रैप v4.1 में और ऊपर data-boundary="viewport"( बूटस्ट्रैप ड्रॉपडाउन डॉक्स ) जोड़कर तय किया गया है

लेकिन पहले संस्करणों (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': ''});
});

Answer 10

साफ कर दिया @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');
});

Answer 11

अनुशंसित और चुना हुआ समाधान, हमेशा सबसे अच्छा समाधान नहीं होता है। दुर्भाग्य से इसका समाधान लिंक्डइन ने हाल ही में उपयोग किया है और यह स्थिति के आधार पर पृष्ठ पर कई स्क्रॉलबार बनाता है।

मेरा तरीका थोड़ा अलग था।

मैंने एक और div में तालिका-उत्तरदायी div समाहित की। फिर मैंने ऊंचाई 100%, चौड़ाई: 100%, प्रदर्शन ब्लॉक और स्थिति को निरपेक्ष रूप से लागू किया, इसलिए ऊंचाई और चौड़ाई पृष्ठ आकार पर आधारित है, और छिपी हुई ओवरफ्लो पर सेट है।

तब टेबल रेस्पॉन्सिव डिव पर मैंने 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>

Comments

छोटे दृश्य ऊंचाई के लिए समाधान नहीं। निचले ड्रॉपडाउन लिंक अब आउट ऑफ़ व्यू के कारण उपलब्ध नहीं हैं।

— सायका 85

Answer 12

स्वीकृत उत्तर और @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 */
    }
}

बड़े स्क्रीनों पर ड्रॉपडाउन को रिपॉजिटिव-टेबल के पीछे नहीं छिपाया जाएगा और छोटे स्क्रीन में इसे छिपा दिया जाएगा, लेकिन यह ठीक है क्योंकि मोबाइल में स्क्रॉल बार है।

आशा है कि यह किसी की मदद करेंगे।

Answer 13

Burebistaruler प्रतिक्रिया ios8 (iphone4s) पर मेरे लिए ठीक काम करती है, लेकिन इससे पहले कि काम कर रहा था Android पर woks नहीं है। मैं क्या है जो मेरे लिए 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" );
})

Answer 14

यह किसी और के लिए उपयोगी हो सकता है। मैं DatatablesJS का उपयोग कर रहा हूं। मैं तालिका की वर्तमान ऊंचाई में 500px जोड़ता हूं। मैं ऐसा इसलिए करता हूं क्योंकि डेटाटैबल्स आपको अपनी तालिका में 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");
    })
})

और एच.टी.एम.एल.

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

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

इससे पहले:

ड्रॉपडाउन दिखाए जाने के बाद:

Answer 15

जब ड्रॉपडाउन एक तालिका के नीचे के करीब है, तो हमने ड्रॉपडाउन पर एक। यहाँ छवि विवरण दर्ज करें

Comments

मैं अंत में उस समाधान से सबसे ज्यादा खुश हूं। $('table tr:nth-last-child(-n+3) td').addClass('dropup')।

— फुर्गस

Answer 16

यह बूटस्ट्रैप 4 में मेरे लिए काम करता है क्योंकि इसमें v3 की तुलना में अलग-अलग ब्रेकप्वाइंट हैं:

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

Answer 17

जब तक लोग अभी भी इस मुद्दे में फंसते हैं और हम 2020 में ही हैं। मुझे ड्रॉप डाउन मेनू को एक फ्लेक्स डिस्प्ले देकर शुद्ध सीएसएस समाधान मिलता है

यह स्निपेट 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;
}

Answer 18

खैर, शीर्ष उत्तर को पढ़ते हुए, मैंने देखा कि यह वास्तव में काम नहीं करता है जब आप स्क्रॉल बार देख रहे हैं और टॉगल बटन अंतिम कॉलम में था (मेरे मामले में) या अन्य कॉलम जो अनदेखी है

लेकिन, यदि आप 'छिपी' के लिए 'विरासत' को बदलते हैं तो यह काम करेगा।

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

उस तरह से करने की कोशिश करो।

Answer 19

बूटस्ट्रैप के अंदर। अगला कोड खोजते हैं:

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

... और इसके साथ अद्यतन करें:

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

Answer 20

सिंपली यूज़ दिस

.table-responsive {
    overflow: inherit;
}

यह क्रोम पर काम करता है, लेकिन IE10 या एज नहीं क्योंकि विरासत में मिली संपत्ति समर्थित नहीं है

Answer 21

मेरे मामले में, यह ठीक काम करता है:

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