I recently discovered that using the plug-in bootstrap drop-down menu can't be used. What should I do

[xuwenlongl]

I recently discovered that using the plug-in bootstrap drop-down menu can't be used. What should I do

[tonydspaniard]

Can you tell me more info about it? I'll be happy to help

[xuwenlongl]

I used the Bootstrap drop-down menu and the yii2-date-picker widget
At the same time
Clicking the drop-down menu does not reflect anything
No, any error message prompt

<li class="dropdown">
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Java
                                        <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Swing</a></li>
                                        <li>
                                            <a href="#">jMeter</a></li>
                                        <li>
                                            <a href="#">EJB</a></li>
                                        <li class="divider"></li>
                                        <li>
                                            <a href="#">C++</a></li>
                                    </ul>
                                </li>
                                <!-- Bootstrap dropdown end-->
                                <?= GridView::widget([
                                    'dataProvider' => $dataProvider,
                                    'filterModel' => $searchModel,
                                    'options' => ['class' => 'card-body', 'id' => 'grid'],
                                    'tableOptions' => ['class' => 'table table-striped', 'width' => '100%'],
                                    'columns' => [
                                        ['attribute' => 'login_time',
                                            'format' => 'raw',
                                            'value' => function ($data) {
                                                return date('Y-m-d', $data->login_time);
                                            },
                                            'headerOptions' => ['width' => 150],
                                            'filter' => \dosamigos\datepicker\DatePicker::widget([
                                                'model' => $searchModel,
                                                'language' => Yii::$app->language,
                                                'attribute' => 'login_time',
                                                'value' => $searchModel->login_time,
                                                'options' => ['readonly' => true],
                                                'clientOptions' => [
                                                    'format' => 'yyyy-mm-dd',
                                                    'todayHighlight' => true,
                                                    'autoclose' => true,
                                                    'todayBtn' => 'linked',
                                                    'clearBtn' => true,
                                                ],
                                            ]),
                                        ],

                                    ],
                                ]); ?>

[tonydspaniard]

You are creating a GridView within a menu? The above code has the wrong HTML markup, I think thats the issue.

[xuwenlongl]

Thank you even though I still haven't figured out the reason

[tonydspaniard]

I need more information...can you show the entire view file? I may be able to help you.

[xuwenlongl]

Click the drop-down for no reflection. Deleting the plug-in code can be used normally

<?php


use yii\grid\GridView;


/* @var $this yii\web\View */
/* @var $searchModel backend\models\AdminSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */
$this->title = 'admin';
$this->params['breadcrumbs'][] = $this->title;
?>
<ul class="nav navbar-nav navbar-right">
    <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
        <i class="fa fa-times icon"></i>
    </button>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
           aria-expanded="false"><i class="fa fa-comments-o"></i></a>
        <ul class="dropdown-menu animated fadeInDown">
            <li class="title">
                notice<span class="badge pull-right">0</span>
            </li>
            <li class="message">
                no notice
            </li>
        </ul>
    </li>
    <li class="dropdown danger">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
           aria-expanded="false"><i class="fa fa-star-half-o"></i> 4</a>
        <ul class="dropdown-menu danger  animated fadeInDown">
            <li class="title">
                notice <span class="badge pull-right">4</span>
            </li>
            <li>
                <ul class="list-group notifications">
                    <a href="#">
                        <li class="list-group-item">
                            <span class="badge">1</span> <i class="fa fa-exclamation-circle icon"></i>
                            new register
                        </li>
                    </a>
                    <a href="#">
                        <li class="list-group-item">
                            <span class="badge success">1</span> <i class="fa fa-check icon"></i> new order
                        </li>
                    </a>
                    <a href="#">
                        <li class="list-group-item">
                            <span class="badge danger">2</span> <i class="fa fa-comments icon"></i> user info
                        </li>
                    </a>
                    <a href="#">
                        <li class="list-group-item message">
                            view all
                        </li>
                    </a>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<div class="container-fluid">
    <div class="side-body">
        <div class="row">
            <div class="col-xs-12">
                <div class="card">
                    <?= GridView::widget([
                        'dataProvider' => $dataProvider,
                        'filterModel' => $searchModel,
                        'options' => ['class' => 'card-body', 'id' => 'grid'],
                        'tableOptions' => ['class' => 'table table-striped', 'width' => '100%'],
                        'columns' => [
                            ['class' => 'yii\grid\CheckboxColumn', 'name' => 'id'],
                            ['attribute' => 'id', 'headerOptions' => ['width' => 50]],
                            ['attribute' => 'phone', 'headerOptions' => ['width' => 120]],
                            ['attribute' => 'true_name'],
                            ['attribute' => 'id_card'],
                            ['attribute' => 'login_ip', 'value' => function ($data) {
                                return long2ip($data->login_ip);
                            }, 'headerOptions' => ['width' => 150]],
                            ['attribute' => 'login_time',
                                'format' => 'raw',
                                'value' => function ($data) {
                                    return date('Y-m-d', $data->login_time);
                                },
                                'headerOptions' => ['width' => 150],
                                'filter' => \dosamigos\datepicker\DatePicker::widget([
                                    'model' => $searchModel,
                                    'language' => Yii::$app->language,
                                    'attribute' => 'login_time',
                                    'value' => $searchModel->login_time,
                                    'options' => ['readonly' => true],
                                    'clientOptions' => [
                                        'format' => 'yyyy-mm-dd',
                                        'todayHighlight' => true,
                                        'autoclose' => true,
                                        'todayBtn' => 'linked',
                                        'clearBtn' => true,
                                    ],
                                ]),
                            ],
                            ['attribute' => 'status', 'filter' => [0 => 'disable', 1 => 'open'], 'value' => function ($data) {
                                return $data->status == 1 ? 'disable' : 'open';
                            }],
                            ['class' => 'yii\grid\ActionColumn',
                                'header' => 'operation',
                            ],
                        ],
                    ]); ?>
                </div>
            </div>
        </div>
    </div>
</div>

[vkponomarev]

hello xuwenlongl did u solve this problem or any one?

The same problem i use bootstrap 3 menu
data-toggle="dropdown" do not work with this widget

wtihout this widget all works
when i click
aria-expanded="false" turn to aria-expanded="true"
and for menu
class="dropdown dropdown-menu-hover" turn to class="dropdown dropdown-menu-hover open"

when widget is on the same page
when i look in elemets they do some work but nothing changing
class="dropdown dropdown-menu-hover"
aria-expanded="true"

[vkponomarev]

Hello every one i did solve this problem:

i commented this in DatePickerAsset

public $depends = [
        'yii\bootstrap\BootstrapPluginAsset'
    ];

class DatePickerAsset extends AssetBundle
{
    public $sourcePath = '@bower/bootstrap-datepicker/dist';

    public $css = [
        'css/bootstrap-datepicker3.css',
    ];

    public $js = [
        'js/bootstrap-datepicker.js'
    ];

   /* public $depends = [
        'yii\bootstrap\BootstrapPluginAsset'
    ];*/
}

and add manualy at frontend AppAsset

/assets/e00d61fc/js/bootstrap.js

class AppAsset extends AssetBundle
{
    public $js = [
       // 'js/bootstrap.min.js',
        '/assets/e00d61fc/js/bootstrap.js',
    ];

/assets/e00d61fc/js/bootstrap.js was adding by DatePicker at the end of page, and i think it was conflicting with already added at the start of page js/bootstrap.min.js. So u need only one bootstrap js for all work well and for datePicker u need not min.js, so i added only one at start of page and deleted one that datePicker added.