Topic: Tabs in combination with forms

Tklaversma free asked 7 years ago


I'm using Tabs with 2 panes. In each tab-pane I have a form with two inputs. When I switch to the non-active tab-pane and go back to the other, both forms are visible :S. I used this method exactly as described on https://mdbootstrap.com/components/tabs/. I think combing this with forms somehow messes it up. Anyone got an idea?

Marta Wierzbicka staff 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

Neal Creapeau pro answered 7 years ago


I hope the staff at MDB can comment on this with some insight. Using the Classic Tabs from https://mdbootstrap.com/components/tabs/ example. The following code will NOT work properly with the value attribute set on the input on pane 3. However if you remove the value attribute completely, all tabs work correctly. Why and how is the value attribute affecting the other tabs?

 

<form method="post" action="" id="contactadd">
  <!-- Nav tabs -->
  <div class="tabs-wrapper">
    <ul class="nav classic-tabs tabs-cyan" role="tablist">
      <li class="nav-item">
        <a class="nav-link waves-light active" data-toggle="tab" href="#panel1" role="tab">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" data-toggle="tab" href="#panel2" role="tab">Follow</a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" data-toggle="tab" href="#panel3" role="tab">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" data-toggle="tab" href="#panel4" role="tab">Be awesome</a>
      </li>
   </ul>
 </div>
 <!-- Tab panels -->
 <div class="tab-content card">
 <!--Panel 1-->
 <div class="tab-pane fade in show active" id="panel1" role="tabpanel">
    <div class="md-form">
      <input type="text" id="fname" name="firstname" class="form-control">
      <label for="fname">First Name</label>
   </div>
 </div>
 <!--/.Panel 1-->

 <!--Panel 2-->
<div class="tab-pane fade" id="panel2" role="tabpanel">
  <div class="md-form">
    <input type="text" id="lname" name="lastname" class="form-control">
    <label for="lname">Last Name</label>
  </div>
</div>
<!--/.Panel 2-->

<!--Panel 3-->
<div class="tab-pane fade" id="panel3" role="tabpanel">
  <p>This belongs on Pane 3 - Contact</p>
  <div class="md-form">
    <input type="text" id="street" name="address" class="form-control" value="somevalue">
    <label for="street">Street</label>
  </div>
</div>
<!--/.Panel 3-->

<!--Panel 4-->
<div class="tab-pane fade" id="panel4" role="tabpanel">
  <p>This belongs on Pane 4 - Be awesome </p>
  <div class="md-form">
    <input type="text" id="citylabel" name="city" class="form-control">
    <label for="citylabel">City</label>
 </div>
</div>
<!--/.Panel 4-->

</div>
</form>

 


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?    

Tklaversma free commented 7 years ago

In my case the values do not appear on the wrong input, but both tab panes become visible when switching between them. I think you problem lies more in the way of using label for attribute in combination with the right input id. For example. I have an input with id A. Then my label for that input should have for="A". But when you apply this also to another label, your described problem occurs.

Neal Creapeau pro commented 7 years ago

I don't have values appearing in the wrong inputs, All inputs have distinct ids that match the appropriate labels. However, if a you set the value attribute on one of those inputs, once the tab pane that holds that input is viewed, it shows up (not only the input but other elements as well) start showing on other tabs

Marta Wierzbicka staff answered 7 years ago


Hi,

could you send me the file with your code with this problem to m.szymanska@mdbootstrap.com? I'll try to help you. And if you downloaded MDB package from our website then you have free version and tabs are pro components, so they won't work within free version.

Best,

Marta


Tklaversma free commented 7 years ago

Thanks for you response. I just mailed you my code example. I use the MDB Pro version.


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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags