Bootstrap Tabs are showing strange behavior

Yii 2.0 General Discussions
1

Hi,
I am getting some strange behavior with Tabs. When the site initially is loaded in the browser the tabs are inactive and all their content is displayed on the page. There is nothing I can do.

Clipboard01
Clipboard011197×254 29.8 KB
When enabling the drop down in the code, the first two tabs are still inactive, but after choosing one option from the drop down, all tabs become active.

When using bootstrap4 the code messes up the nav-bar. Can’t add a picture, because new users are only allowed to add one.

Here is the code:
<?php
use yii\helpers\Html;
use yii\bootstrap\Tabs;
//use yii\bootstrap4\Tabs;

  /* @var $this yii\web\View */
  /* @var $model frontend\models\EpiMain */ 
 
 ?>	
<div class="epi-main-view">

	<h1><?= Html::encode('test-site') ?></h1>
</div>
<?php 
echo Tabs::widget([
   'items' => [   
        [
            'label'=>'Tab 1',
            'content'=> 'Tab 1',
            'active'=>true
        ],
        [
            'label'=>'Tab 2',
            'content'=> 'Tab 2',
            'active'=>true
        ],
        /*
        [
            'label' => 'Dropdown',
            'items' => [
                [
                    'label' => 'DropdownA',
                    'content' => 'DropdownA, Anim pariatur cliche...',
                ],
                [
                    'label' => 'DropdownB',
                    'content' => 'DropdownB, Anim pariatur cliche...',
                ],
                [
                    'label' => 'External Link',
                    'url' => 'http://www.example.com',
                ],
            ],
        ],*/
    ],
]);?>
2

Hi @Torsten, welcome to the forum.

Having multiple “active” tabs in the initial setting might be the problem.

3

Hi @softark, thank you very much. That did the trick.

Cheers,
Torsten