Tab content remaining active + text input label mis-aligned

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Tab content remaining active + text input label mis-aligned

tblfounder pro asked 7 years ago

Hi,

I have recently upgraded from 4.3.2 to 4.4.1 and I have a new and pressing issue with tabs. Tab content is still remaining 'active' after a different tab is selected.  The old tab content is shown under the new tab content. The very first text input in the original tab also has its label incorrectly positioned over the text field.

This appears to be associated with the text input and associated label being present in the tab content and only occurs if the text input has an initial value set and a label.

The minimal code below shows the problem.

Be grateful for any solutions to this.

Regards
Ben

<html>
 <head>
 <script src="/js/jquery-3.2.1.min.js" type="text/javascript"></script>
 <link href="/css/bootstrap.css" rel="stylesheet">
 <link href="/css/mdb.css" rel="stylesheet">
 </head>
 <body>
 <main>
 <form>
 <ul class="nav nav-tabs md-pills pills-ins" role="tablist">
 <li class="nav-item">
 <a id="general-tab" class="nav-link active" data-toggle="tab" href="#first-panel" role="tab">First</a>
 </li>
 <li class="nav-item">
 <a id="uas-tab" class="nav-link" data-toggle="tab" href="#second-panel" role="tab">Second</a>
 </li>
 </ul>
 <div class="tab-content">
 <div class="tab-pane active show" id="first-panel" role="tabpanel">
 <p>First tab contents</p>
 <div class="md-form">
 <input type="text" name="password" id="password" class="form-control" value="123">
 <label for="password">Password</label>
 </div>
 </div>
 <div class="tab-pane" id="second-panel" role="tabpanel">
 <p>Second Tab Contents</p>
 </div>
 </div>
 </form>
 </main>
 <script type="text/javascript" src="/js/popper.min.js"></script>
 <script type="text/javascript" src="/js/bootstrap.js"></script>
 <script type="text/javascript" src="/js/mdb.js"></script>
 </body>
 </html>

Mirosław Stasiak answered 7 years ago

Hi,

You have got a few bugs in your code.
Why would you want all tabs to be in form, not just where you have input?
You forgot to add a fade class.

<ul class="nav nav-tabs md-pills pills-ins" role="tablist">
 <li class="nav-item">
  <a id="general-tab" class="nav-link active" data-toggle="tab" href="#first-panel" role="tab">First</a>
 </li>
 <li class="nav-item">
  <a id="uas-tab" class="nav-link" data-toggle="tab" href="#second-panel" role="tab">Second</a>
 </li>
</ul>
<div class="tab-content">
 <div class="tab-pane fade in show active" id="first-panel" role="tabpanel">
  <form>
   <p>First tab contents</p>
   <div class="md-form">
    <input type="text" name="password" id="password" class="form-control">
    <label for="password">Password</label>
   </div>
  </form>
 </div>
 <div class="tab-pane fade" id="second-panel" role="tabpanel">
  <p>Second Tab Contents</p>
 </div>
</div>

Regards,

tblfounder pro answered 7 years ago

Hi, I reduced the code to the minimum that still showed the issue. Each tab has multiple inputs which are all part of the form. And the fade class has no effect on this issue. Regards Ben

Mirosław Stasiak commented 7 years ago

The code I sent you above works fine. Check that you have some bugs in the console and that all CSS files are loaded correctly.

tblfounder pro answered 7 years ago

Hi, Your code works, unless you put an initial value in the input. e.g. <input type="text" name="password" id="password" class="form-control" value="123"> Then it shows the same symptoms I'm seeing. Regards Ben

Mirosław Stasiak answered 7 years ago

Try this script: 
<script>
 $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  var href = e.relatedTarget.getAttribute("href");
  if($(href).hasClass('active')) {
   $(href).removeClass('active');
  }
 });
</script>

tblfounder pro answered 7 years ago

Hi Miroslav, Thanks for this, but now the tab contents for both tabs are always displayed, once both tabs have been selected. And once the Second tab is selected the text input label always overlays the input text (as before). Are you seeing the same issue I am? Apologies if this is relevant, but there are console errors just in my minimal test:  getting /font/roboto/Roboto-...  I had assumed it wasn't connected. Regards Ben  

tblfounder pro answered 7 years ago

Hi Miroslav,

Here are the tab-content panel classes on each tab press with your script:

Initial:

first-panel: tab-pane fade in show active
second-panel: tab-pane fade

After pressing Second:

first-panel: tab-pane fade in show
second-panel: tab-pane active

After pressing First:

first-panel: tab-pane in show active
second-panel: tab-pane

Regards
Ben

Mirosław Stasiak answered 7 years ago

SOLUTION
Check the solution written on codepen.io
Don't  look at styles because this is MDB Free version

https://codepen.io/mirekmts/pen/aLbQgZ

Edit:
I'm going to write a solution with an incorrect label show when the text is inside.

I focused on tabs and missed the labels

Edit 2:
In codepen.io you have got a working solution (tabs and input)

tblfounder pro answered 7 years ago

Hi Miroslav, Thanks for this. The tab content is working in this fine, but the label is overlaying the Input text after selecting Second then First. However, if you move both the tab panels within the form (within the tab-content div) which is necessary if you have inputs on multiple tabs, that reverts to the previous behaviour: https://codepen.io/tblfounder/pen/pWoqrJ Regards Ben

Mirosław Stasiak answered 7 years ago

Hi,
You can not do a form that has both tabs.
This is the solution for the labels:

if($('#password').val() || $('#password').attr('placeholder')) {
  if(!$('#password').siblings('label').hasClass('active')) {
    $('#password').siblings('label').addClass('active');
  }
}

https://codepen.io/mirekmts/pen/aLbQgZ
Regards,

tblfounder pro answered 7 years ago

Hi Miroslav, That's a nasty surprise.  I would have thought that it is a fairly common use to make large forms readable? And if it is the case, then that is a serious undocumented regression from version 4.3.2.  I have been using multiple fields in multiple tabs within the same form for a significant time on a large and critical project. Here shown working fine on 4.3.2:  https://codepen.io/tblfounder/pen/WZbMjw Regards Ben      

Ryan Ternier answered 7 years ago

We use Tabs to make large forms easier to fill out rather than have multiple forms. Now, it's possible to use multiple forms, and work around that (if your architecture allows for such), but you shouldn't force people to use multiple forms as some languages/frameworks won't work well with it.

I should add, using multiple tabs with one <form> inside each tab you will still see this issue.

Is there a fix coming?

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
tblfounder
Pro User
14Support score
3Questions 7Answers
0Snippets likes 0Snippets