Topic: Input get's not focused when it is in a classic-tab section.
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.
Add comment
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.
<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.
Hi,
please, share your code which contains the problem with us and we'll try to help you.
Best,
Marta
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