Topic: Input get's not focused when it is in a classic-tab section.

Sekra24 pro asked 6 years ago


Hey guys, sorry me again :) I have a classic-tab with 8 tabs. In every tab-content is a form. The inputs of the first form/tab can be focused by clicking on the label on the input line. But if I switch tabs I can only focus the text-inputs if I click right after the label. If I click the label directly there is no focus. I think this issue is coming from the display: none of the second, third, ... tab-contents. Can you check this? Is is a big usability issue for me right now. Is there a solution that I can implement? Thank you.

Marta Wierzbicka staff answered 6 years ago


Hi, I don't have this problem when I use classic tabs from our documentation: https://mdbootstrap.com/components/tabs/#classic-tabs. Try this code:
<!-- Classic tabs -->
<div class="classic-tabs">

<!-- Nav tabs -->
<ul class="nav tabs-cyan" role="tablist">
<li class="nav-item">
<a class="nav-link waves-light active" data-toggle="tab" href="#panel1001" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" data-toggle="tab" href="#panel1002" role="tab">Follow</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" data-toggle="tab" href="#panel1003" role="tab">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" data-toggle="tab" href="#panel1004" role="tab">Be awesome</a>
</li>
</ul>

<div class="tab-content border-right border-bottom border-left rounded-bottom">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="panel1001" role="tabpanel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<!-- Material input -->
<div class="md-form">
<input type="text" id="form1" class="form-control">
<label for="form1" >Example label</label>
</div>
</div>
<!--/.Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade" id="panel1002" role="tabpanel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<!-- Material input -->
<div class="md-form">
<input type="text" id="form111111" class="form-control">
<label for="form111111" >Example label</label>
</div>
</div>
<!--/.Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade" id="panel1003" role="tabpanel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 3-->
<!--Panel 4-->
<div class="tab-pane fade" id="panel1004" role="tabpanel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 4-->
</div>

</div>
<!-- Classic tabs -->
Best, Marta

Sekra24 pro commented 6 years ago

Thank you Marta, I had the same ID over multiple input fields. That was the issue. Maybe this helps someone out who stumbled across this problem :)

Marta Wierzbicka staff commented 6 years ago

You're welcome.

Sekra24 pro answered 6 years ago


Any update on this one? Thank you

Sekra24 pro answered 6 years ago


<div class=”tabs-wrapper classic-tabs”>
<ul class=”nav nav-justified tabs-blue” role=”tablist”>
<li class=”nav-item”>
<a class=”nav-link waves-light active” data-toggle=”tab” href=”#tab-1″ role=”tab”><i class=”fa fa-google fa-2x” aria-hidden=”true”></i><br> <?php _e(‘Tab1’, ‘hypertheme’);?></a>
</li>
<li class=”nav-item”>
<a class=”nav-link waves-light” data-toggle=”tab” href=”#tab-2″ role=”tab”><i class=”fa fa-amazon fa-2x” aria-hidden=”true”></i><br> <?php _e(‘Tab2’, ‘hypertheme’);?></a>
</li>
</ul>
</div>
<!–Tab1–>
<div class=”tab-content card”>
<!–Panel 1–>
<div class=”tab-pane fade in show active” id=”tab-1″ role=”tabpanel”>
<a href=”#” class=”btn-sm btn-floating btn-blue-grey tab-info-button” data-toggle=”modal” data-target=”#frequently-asked-questions-modal”><i class=”fa fa-info mr-1″></i></a>
<form data-suggest-form=”true” data-suggest-network=”google”>
<div class=”md-form”>
<input type=”text” name=”query” id=”form1″ class=”form-control”>
<label for=”form1″ class=””><?php _e(‘Your’, ‘hypertheme’);?></label>
</div>
<div class=”text-center”>
<button type=”submit” class=”btn btn-primary center-block”><i class=”fa fa-search”></i> <?php _e(‘Search’, ‘hypertheme’);?></button>
</div>
</form>
</div>
<!–/.Tab1–>
<!–Tab2–>
<div class=”tab-pane fade” id=”tab-2″ role=”tabpanel”>
<a href=”#” class=”btn-sm btn-floating btn-blue-grey tab-info-button” data-toggle=”modal” data-target=”#frequently-asked-questions-modal”><i class=”fa fa-info mr-1″></i></a>
<form data-suggest-form=”true” data-suggest-network=”amazon”>
<div class=”md-form”>
<input type=”text” name=”query” id=”form1″ class=”form-control”>
<label for=”form1″ class=””><?php _e(‘Your ‘, ‘hypertheme’);?></label>
</div>
<div class=”text-center”>
<button type=”submit” class=”btn btn-primary center-block”><i class=”fa fa-search”></i> <?php _e(‘Search’, ‘hypertheme’);?></button>
</div>
</form>
</div>
<!–/.Tab2–>

The input with the name="query" is the problem.

Marta Wierzbicka staff answered 6 years ago


Hi, please, share your code which contains the problem with us and we'll try to help you. Best, Marta

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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags