4.5.2 update breaks tabs


Topic: 4.5.2 update breaks tabs

Sekra24 pro asked 7 years ago

As soon as I upgraded from 4.5 version to 4.5.2 the tabs (Classic tabs - MDB pro component) are showing a weird styling. The <div class="tab-content card"> element has border-top-right and border-top-left borders! Please fix this or is this a known issue? Greetings Sebastian

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 will

Marta Szymanska staff pro premium answered 7 years ago

Hi, I can't reproduce the problem, could you provide any demo or screenshot showing this? I'll try to help you. Best, Marta

Sekra24 pro commented 7 years ago

This is the 4.5.2 version: https://ibb.co/cXMuin

Sekra24 pro commented 7 years ago

This is the 4.5.0 version: https://ibb.co/bWyApS

Sekra24 pro answered 7 years ago

Maybe the staff can answer that ;)

Marta Szymanska staff pro premium answered 7 years ago

Hi, I still don't see the problem when I copy classic tabs to the newest MDB 4.5.2 package. We will fix this if this problem exists but could you provide the code from your screenshot where you see rounded corners? I will check this. Best, Marta

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

Hi, we have a current 4.5.2 version of our demo, this is only an old number but the version is correct. But you're right, now I see these rounded corners. For now, you can use Josip's solution and we will fix this in the next release which will be on May 21st. 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
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No