Ways to stop bootstrap tabs from ruining inactive content? [keeping track of tab status]

Although Bootstrap tabs are useful, a common issue is that content on inactive tabs is removed from the page flow. When switching to a new tab, the previous tab's display attribute is set to none instead of using visibility: hidden or other methods.

For example, if you have dynamically positioned elements using Masonry.js on the "foo" tab, switching to another tab and back requires recalculating their position since they all revert to top: 0px; left: 0px.

This behavior can be costly, especially when dealing with forms filled with data. Switching tabs would cause all filled data to be lost, necessitating re-entry of all information.

What is the best workaround to maintain the previous tab's state when switching?

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

This clever solution has been effective for me:

By overriding certain classes, you can ensure that the content within tab foo is only hidden rather than completely removed from view on the page.

.tab-content>.tab-pane {
  display: block;
  height: 0;
  overflow: hidden;
}

.tab-content>.active {
  height: auto;
  overflow: visible;
}

It's worth noting that if there are issues with horizontal overflow, setting width: 0 might be necessary. Just remember to reset the width property back to its normal state within the .tab-content>.active{...} section.

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

How to create a see-through background using three.js

I am new to working with three.js and recently came across a codepen that caught my attention. However, I am facing difficulties while trying to change the background color. After exploring various questions related to this issue, I attempted to add { alp ...

javascriptcssanimationthree.js

I am experiencing issues with the jQuery function within my MVC Application

When working on my MVC application, I encountered an issue where the onclick function was not functioning as expected. @section Scripts{ <script src="~/Scripts/plugins/toastr/toastr.min.js"></script> <script> $(document). ...

javascriptjqueryasp.netasp.net-mvc

Adjusting AngularJS scroll position based on key presses

I am currently working on an autocomplete feature using AngularJS. I seem to be experiencing a problem with the scrollbar behavior. In the interactive gif provided, you can observe that the scrollbar remains stationary when navigating with the arrow keys. ...

javascriptcssangularjs

What could be preventing me from typing in the input field that's linked to an Angular model in Firefox browser?

Having trouble entering text in input on Firefox, even though it works fine on Chrome. No CSS issues or jQuery used. Here is my HTML code: <div class="todo_content" style="width:66%"> <input class="todo_add_input" autofocus="autofocus" ...

angularjshtmlfirefox

Clicking on a search result does not trigger the popup to open in the App.vue file

Whenever I click on a search item, my goal is to open the Popup. Why does this.$emit('openPopup', bookId); not work in the selectBook(bookId) method? In Results.vue component, the search results are displayed using Google Books API: <template ...

javascriptvue.js

Tips for creating a clickable image inside a span button

I am trying to create a clickable button that includes a span with a .png image inside. Currently, the button only responds when I click around the image, not directly on it. I have searched for solutions but haven't found one that addresses my specif ...

htmlcss

Extracting an extension from a file name containing special characters in JavaScript: A step-by-step guide

I am attempting to extract the file extension from a filename. The filename may incorporate special characters such as "#, @, ., _, (), etc. For example: var file1 = "fake.der" var file2 = "fake.1.der" var file3 = "fake_test.3.der" In the scenarios above ...

javascriptarrays

Stop the repetition of event handlers by utilizing the .off() method to remove duplicates

Here's a scenario where I've assigned two event handlers: $('#myElement').on('click', '.classA', doSomething); $('#myElement').on('click', '.classB', doSomethingElse); Now, the task at ...

javascriptjquery

Not defined within a function containing arrays from a separate file

Can anyone help me with listing multiple arrays from another file? When I try to iterate through each array using a "for" loop, the code compiles and lists everything but gives an undefined error at the end. How can I fix this? I have included some images ...

javascriptnode.jsjson

step by step guide on swapping a portion of a JSON string

I need to eliminate the character "C" from keys that start with C_ in the following JSON string. Here is the JavaScript object I have: var jsonData= { key1:val1, key2:val2, C_100:1, C_101:2, C_102:3, } The desired output should look like this: v ...

javascriptjqueryjsonregexreplace

jQuery performs perfectly in Chrome but encounters issues in IE9/IE8 and other older versions of Internet

I've implemented this lengthy jQuery script to enable dynamic dropdown loading and updating when selections are changed. However, I'm facing issues in Internet Explorer where the script loads the dropdowns initially but doesn't trigger oncha ...

javascriptjqueryhtml

The div element disappears upon calling the load() function

Currently, I am working to implement sorting criteria (such as by price or author) on my jsp page. I am utilizing ajax to refresh the content of a div when a new sorting option is selected. However, upon calling the reload function, the div just disappears ...

javascriptjqueryajaxjsp

How can I access the .ts variable value within an *ngIf statement in HTML?

My goal is to showcase images every 2 seconds, but currently I am only able to display all of them at once. Below is the HTML line I am using: <img id="bh" routerLink="/" *ngIf="bh?.id == count" [src]="bh?.src" height="42" width="42"/> Here is t ...

htmlangularvar

What is the best way to stay on track with internal anchor links when navigating with Aurelia?

I'm currently working on developing a style guide for a project and one of the features I would like to implement is a basic click behavior on anchor links, allowing them to smoothly scroll to the corresponding section on the page. For instance: < ...

javascripttypescriptroutesaurelia

I encountered a problem with the Javascript toggle menu collapsing feature

I have built a custom toggle menu using Javascript: $(document).ready(function() { $('.toggle').click(function () { if ($(this).hasClass("expanded")) { $(this).next().slideUp("fast"); } else { $(&apos ...

javascriptmenutoggle

Implementing a delete functionality within a loop on a JavaScript object array

I have a JavaScript object with the following structure: var partner = { p_name: { value: partner_name, label: "Name" }, p_id: { value: partner_ID, label: "ID" }, p_status: { value: partner_status, label: "Status" }, p_email: { value: partner_emai ...

javascriptjquery

Interactive window allowing the user to closely examine code

Hey guys, I need your help with something Is there a way (PHP / jQuery) that allows me to zoom in on my code? Similar to how lightbox works for images. I specifically want to zoom in on dynamic code while using Yii's CListView. I'm thinking of ...

phpjavascriptjquerylightboxyii

Unable to perform filtering on a nested array object within a computed property using Vue while displaying data in a table

Lately, I've been experimenting with different methods to filter data in my project. I've tried using various approaches like methods and watchers, but haven't quite achieved the desired outcome yet. Essentially, what I'm aiming for is ...

javascriptvue.jsfiltercomputed-properties

Exploring the interactivity of Vue3 Composition API props!

Currently, I am monitoring two props on a child component (basicSalaryMin and basicSalaryMax). Once the value changes, my next step is to update a reactive value on the parent component (data.companyModels, which is also passed to the child component as a ...

javascriptvue.jsobjectvuejs3vue-props

organize and identify a JSON data using sorting and matching techniques

Having a JSON structure as shown below: [ { "id": "1", "freq": "1", "value": "Tiruchengode", "label": "Tiruchengode" }, { "id": "2", "freq": "1", "value": "Coimbatore", "label": " ...

javascriptregexjsonsearch