Responsive Bootstrap tables nested within responsive tabs

Utilizing footable in conjunction with Boostrap Responsive Tabs leads to an issue post-resize. When the page is initially loaded on a desktop, everything functions properly until the screen is resized. Once the screen is resized, the tables within the tabs stop working. This issue occurs both ways - if the page is loaded with a small browser window, the tables will work within the responsive tabs, but break when the window is expanded.

The problem has been replicated on jsfiddle

(External resources can be found on fiddle)

$(document).ready(function(){

    fakewaffle.responsiveTabs(['xs']);
    $('.footable').footable();

});

<div class="row">
<div class="col-lg-12"> 
    <div class="bs-component">
        <ul class="nav nav-tabs responsive">
            <li class="active">
                <a data-toggle="tab" href="#tab1">This</a>
            </li>
            <li>    
                <a data-toggle="tab" href="#tab2">Is</a>
            </li>
            <li>
                <a data-toggle="tab" href="#tab3">My</a>
            </li>
            <li>
                <a data-toggle="tab" href="#tab4">Boomstick!</a>
            </li>
         </ul>

        <div class="tab-content">
            <div id="tab1" class="tab-pane fade active in">
                <table class="table table-striped table-bordered table-hover footable toggle-medium">
                    <thead>
                         <th>Identifier</th>
                         <th data-hide="all">Column2</th>
                         <th data-hide="all">Column3</th>
                     </thead>
                     <tbody>
                         <tr>
                             <td>Clickme</td>
                             <td>Okay</td>
                             <td>Whatever</td>
                          </tr>
                          <tr>
                             <td>Second Row</td>
                             <td>Still Okay</td>
                             <td>Still Whatever</td>
                          </tr>
                     </tbody>
                 </table>
             </div>
             <div id="tab2" class="tab-pane fade active">
                <table class="table table-striped table-bordered table-hover footable toggle-medium">
                    <thead>
                         <th>Identifier</th>
                         <th data-hide="all">Column2</th>
                         <th data-hide="all">Column3</th>
                     </thead>
                     <tbody>
                         <tr>
                             <td>Clickme</td>
                             <td>Okay</td>
                             <td>Whatever</td>
                          </tr>
                          <tr>
                             <td>Second Row</td>
                             <td>Still Okay</td>
                             <td>Still Whatever</td>
                          </tr>
                     </tbody>
                 </table>
             </div>
        </div>
    </div>
</div>

Answer №1

The reason for this issue is that "Boostrap Responsive Tabs" changes the display mode from tab to accordion or vice versa, resulting in all HTML content being removed from the tab and added to the accordion. This action also removes the javascript events used by footable.

To resolve this issue, you need to re-initialize footable whenever "Boostrap Responsive Tabs" changes the display mode during a resize event.

var panelView = $('.panel-group.responsive').is(':visible');    
$( window ).resize( function () {
    if ( $('.panel-group.responsive').is(':visible') != panelView ) {
        $('.footable').removeClass('footable-loaded').footable();
        panelView = $('.panel-group.responsive').is(':visible');
    }
} );

See live demo here: http://jsfiddle.net/us7hgf3g/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop the form submission until validation is complete

I'm currently working on a form and encountering some validation issues. HTML: <form id="regForm" class="form-group" method="POST" action="signup.php"> <div class="col-md-12"> <h2>Job Pocket</h2> </div> <di ...

Perl's powerful capabilities allow for the creation of interactive drop-down menus

As a newcomer to web programming, I have recently been tasked with scripting projects during my summer internship. I've been utilizing Perl to develop CGI scripts for my company's internal website, specifically catering to the needs of the develo ...

first item's grandchild selection

https://jsfiddle.net/jg69c3yf/1/ I don't have a lot of experience with CSS. My goal is to target the div with the class arrow-right, but only if it's inside the first child of a div with the class active. In this sample code, Only item 3 shoul ...

What is the best way to assign a value to a class variable within a method by referencing the 'this' keyword?

Is there a way to set the state of this Ionic react app when displaying the outcome of a reset service? I am facing challenges with using this.setState({resetSuccess}) within a method due to scope issues. (Details provided in comments) Here is the relevan ...

Utilizing Jquery to automatically scroll to a specific div on page load by setting an

I am attempting to automatically scroll to the div specified in the URL. The URL may include one of 21 different IDs such as: url.com/test#lite1 url.com/test#lite2 url.com/test#lite3 This scrolling action should happen when the page loads (so that user ...

"Exploring the interactivity of touch events on JavaScript

Hi there, I'm currently facing an issue with the touch events on my canvas. While the mouse events are functioning correctly and drawing as expected, incorporating touch events seems to be causing a problem. When I touch the canvas, the output remains ...

What is the best way to implement or disable a function when toggling a switch in pure JavaScript?

I'm currently facing an issue with my transliteration function that is supposed to be executed only when the checkbox is checked. The problem is, even after unchecking the checkbox, the function still continues to run. const checkBox = document.que ...

Is there a different way to invoke PHP within JavaScript?

Is it possible to include PHP code in JavaScript? I have come across information stating that this practice is not recommended: document.getElementById('id1').innerHTML="<?php include my.php?>"; If including PHP directly in JavaScript is ...

repeated firing of keydown event in ReactJS

Having an issue with adding an event listener and checking if it's level 1. When I press the space key once, it seems to fire more than 50 times. Any assistance would be greatly appreciated. document.addEventListener("keyup", function(e) { if(l ...

Combining arrays of objects sharing a common key yet varying in structure

Currently, I am facing a challenge while working on this problem using Typescript. It has been quite some time since I started working on it and I am hoping that the helpful community at StackOverflow could provide assistance :) The scenario involves two ...

Data loss from AngularJS multipartForm directive when redirecting to different routes

Having trouble with an Excel file uploader and data parsing in the routes? It seems like the FormData is getting lost when sent through the $http service route. Any advice or experience on how to handle this issue would be greatly appreciated! Html View: ...

What is the reason for not allowing return statements in the ternary operator?

Imagine you have a basic form and you want to determine if the form has been modified. If it has changed, you want to submit it; otherwise, you want to prevent form submission. To tackle this, instead of using an if-else statement, I decided to go for a te ...

When using .map() to iterate through an array of objects in Next.js, why does the data display in the console but

I'm facing an issue with displaying the elements of an array in HTML. I'm fetching data from the Bscscan API and while I can retrieve data successfully from the first API, the second one doesn't display the data in the local browser. I' ...

What techniques can be used to maintain the alignment of an image while the surrounding text changes?

Having trouble aligning my image without affecting its position. When the wind text is hidden (JavaScript not functioning in CodePen), meaning it is not displayed below the temperature, the weather image shifts upwards. I attempted to use 'absolute&ap ...

Switch between two functions by clicking a button

Presented here is a button that serves as a toggle switch: <button ng-click="togglefunction()">Toggle Data</button> Below is the toggle functionality: $scope.toggleToolPanel = function () { // The goal is to include the following 2 ...

Using inline style instead of relying on the quill editor's built-in classes, as classes may not be accessible in order to render HTML effectively

I have integrated the ngx-quill editor into my Angular project as the rich text editor. I plan to save the generated HTML in a database and display it on various browsers using innerHTML. Since the styling is done through a class attribute that references ...

Show the HTML page returned by the server on the client side

Hey there! I've come across a PHP code snippet that sends back an HTML file as a response. This PHP code makes use of the include method to send the file. When I'm on the client side, I'm employing AJAX. Upon typing console.log(data) (with ...

What is the syntax for declaring a boolean or object type?

Is it possible to create a variable in TypeScript that can hold either true/false or an object of booleans? I'm still learning TS and would like some input on this syntax. variableA: { a: boolean, b: boolean } | boolean I found a workaround for now, ...

show a pie chart at the top of the div using highcharts

i am struggling with positioning the high-chart with a label, as seen in the image below https://i.sstatic.net/m9bXW.png does anyone know how to properly display the chart from the top left corner? i have attempted to adjust the settings like this { ...

Issues with importing Three.js as a module - encountering an Uncaught SyntaxError:

I am currently delving into the world of three.js and working on my first project. I am following the example code provided on the three.js website. Everything runs smoothly when I have three.js stored in a folder like: js/ directory However, I am enco ...