Tab content coming over into other tabs

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Tab content coming over into other tabs

edsachs pro asked 7 years ago

Hello, Upgraded from 4.3.2 Pro to 4.4 Pro. Have various tab sections set up for 2 or 3 tabs, using md-pills and nav-justified classes, with the tab-content laid out exactly per your example (https://mdbootstrap.com/components/tabs/) and my content replacing yours. Initial rendering is fine, but when switching tabs, the content of the last tab visited is now showing at the bottom of the newly displayed tag. This was not an issue in 4.3.2. To compare, I downloaded Bootstrap4-alpha6 direct, linked to it, versus the one you folks supply (plus adding Tether back), and all worked as expected. Please look into what changed and fix, or provide a handling. Regards, Ed

Marta Szymanska staff pro premium answered 7 years ago

Hi, could you send me your html file to m.szymanska@mdbootstrap.com to look at this issue? And then I will help you. Best, Marta

edsachs pro commented 7 years ago

Marta, To fill you in, I am developing an Electron desktop app using the EmberJS framework. It in turn uses handlebars for page rendering, and one creates components to embed in the page. Hence, it would not be a good example of something to send you as there is too much underlying code. I discovered that bypassing my content with plain lorum ipsum text caused no issues in the Tab functionality. Going back to my components does cause the issue. I differentiated that this began only when I started using the Bootstrap4 included in the new 4.4.0 MDBPro folder. As mentioned, this did not occur with MDBPro 4.3.2. I then swapped out your Bootstrap for the original through their site, and the problem does not occur. Hence, I can only conclude that some modification was made to the version of Bootstrap you folks supply that now conflicts with the EmberJS framework I am using. Do you happen to know if and what changes were made to tab.js in Bootstrap? Regards, Ed

edsachs pro answered 7 years ago

With Bootstrap4-beta now released, gave that a go and the tabbing issue has re-surfaced. Hence, the issue lies in the new beta being used with the EmberJS framework. Since that version is what you folks are now using, I need to seek elsewhere for the solution.

Marta Szymanska staff pro premium answered 7 years ago

Hi, we don't support EmberJS so, unfortunately, I have no way to help you. Best, Marta

Neal Creapeau pro answered 7 years ago

I have run into this same problem. I have multiple tab panes with multiple inputs on each tab pane. All the inputs belong to a parent form that the tabs-wrapper is a child of. After endless hours of exploring why content from the last 2 tab panes show up in the the other tabs once visited, i found that it happens when you add the value attribute to an input element. I removed all the value attributes from all the inputs and the problem went away. However, not being able to set a value to an input element??? Not very useful. Any ideas on how to fix this?

edsachs pro commented 7 years ago

As I only needed two tabs, I used a card flip and placed the separate items on each side of it. Looks cooler, better User experience and it got done. I realized it was a Bootstrap issue and didn't feel like waiting around for a fix. We carry on...

Marta Szymanska staff pro premium commented 7 years ago

This week will be the new MDB package with BS Beta 2 where the problem is solved.

Marta Szymanska staff pro premium answered 7 years ago

Hi,

this is a similar issue like here: https://mdbootstrap.com/support/nested-carousel-inside-tab-pane/, so this tabs problem is a Bootstrap bug but it’s fixed already in Bootstrap 4 beta-2. Now we are working on MDB update that contains the latest version of Bootstrap.

Best,

Marta

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
edsachs
Pro User
10Support score
1Questions 1Answers
0Snippets likes 0Snippets