Topic: 4.5.2 update breaks tabs
Sekra24
pro
asked 7 years ago
Marta Wierzbicka
free
answered 7 years ago
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 Wierzbicka
free
answered 7 years ago
Josip Tomašev
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 priority commented 7 years ago
I can't tell you that, but I suppose it will
Marta Wierzbicka
free
answered 7 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No