Topic: 4.5.2 update breaks tabs
Josip Tomašev pro premium priority answered 7 years ago
Hi, Sekra24
.tab-content.card makes top left and top right corner rounded, so you have this 'problem'. You can add next lines to your css, and that will be ok:
.tab-content { border-top-left-radius: 0; border-top-right-radius: 0; }
and to prevent jumping content when clicking on tabs, you can add next css:
.classic-tabs li a { border-bottom: 3px solid transparent; }
Greetings
Josip
Sekra24 pro commented 7 years ago
thank you josip, will this be fixed in the next release?Josip Tomašev pro premium priority commented 7 years ago
I can't tell you that, but I suppose it willMarta Szymanska staff pro premium answered 7 years ago
Sekra24 pro commented 7 years ago
This is the 4.5.2 version: https://ibb.co/cXMuinSekra24 pro commented 7 years ago
This is the 4.5.0 version: https://ibb.co/bWyApSSekra24 pro answered 7 years ago
Marta Szymanska staff pro premium answered 7 years ago
Sekra24 pro commented 7 years ago
Marta, your demo is using v4.5.0 (https://ibb.co/fK3p1J) Your developers should update this or tell me what I'm doing wrong. This takes my time too much.Sekra24 pro commented 7 years ago
I think Josip has the same issues.Sekra24 pro answered 7 years ago
<div class="tool-wrapper"> <!-- Nav tabs --> <div class="tabs-wrapper"> <ul class="nav nav-justified classic-tabs tabs-blue" role="tablist"> <li class="nav-item"> <a class="nav-link waves-light active" data-toggle="tab" href="#tab-google" role="tab"><i class="fa fa-google fa-2x" aria-hidden="true"></i><br> Google</a> </li> </ul> </div> <!--Google--> <div class="tab-content card"> <!--Panel 1--> <div class="tab-pane fade in show active" id="tab-google" role="tabpanel"> <a href="#" class="btn-sm btn-floating btn-blue-grey tab-info-button" data-toggle="modal" data-target="#google-information-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 keyword', 'hypertheme');?></label> </div> <div class="row"> <div class="col-md-6"> <div class="md-form"> <select name="country" id="country" class="mdb-select" searchable="<?php _e('Search here..', 'hypertheme');?>"> <option value="" disabled selected><?php _e('Choose your country', 'hypertheme');?></option> <?php foreach ($countries as $code => $country) { ?> <option value="<?php echo strtolower($code); ?>"><?php echo $country; ?></option> <?php } ?> </select> <label for="country"><?php _e('Country', 'hypertheme');?></label> </div> </div> <div class="col-md-6"> <div class="md-form"> <select name="language" class="mdb-select" searchable="<?php _e('Search here..', 'hypertheme');?>"> <option value="" disabled selected><?php _e('Choose your language', 'hypertheme');?></option> <?php foreach ($languages as $code => $language) { ?> <option value="<?php echo strtolower($code); ?>" data-country="<?php echo $language['country']; ?>"><?php echo $language['name']; ?></option> <?php } ?> </select> <label><?php _e('Language', 'hypertheme');?></label> </div> </div> </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> <!--/.Google-->
Marta Szymanska staff pro premium answered 7 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No