CODEWITHSUNDEEP
yii2yii2-basic-app
wkille
wkille

Reputation: 643

Add class to a submenu container in Yii2 Bootstrap4 Nav widget

I'm using the Nav widget in Yii2. I have a dropdown menu as part of the nav menu but the dropdown is very long and extends beyond the bottom of the page and doesn't scroll. To solve this I am trying to add the pre-scrollable class to the submenu container. Try as I might I can't seem to make it work.

In the Yii manual for the Nav widget (https://www.yiiframework.com/extension/yiisoft/yii2-bootstrap/doc/api/2.0/yii-bootstrap-nav) under the $Items public property it says:

dropDownOptions: array, optional, the HTML options that will passed to the yii\bootstrap\Dropdown widget.

I've also looked at the man page for the Dropdown widget (https://www.yiiframework.com/extension/yiisoft/yii2-bootstrap/doc/api/2.0/yii-bootstrap-dropdown).

The code I have for my Nav widget is like:

echo Nav::widget([
    'options' => ['class' => 'navbar-nav ml-auto'],
    'items' => [
        ['label' => 'Home', 'url' => ['/site/index']],
        ['label' => 'About', 'url' => ['/site/about']],
        [
            'label' => 'Dropdown menu',

            //'dropDownOptions' => ['options' => ['class' => 'pre-scrollable']],
            //'dropDownOptions' => ['class' => 'pre-scrollable'],
            //'dropDownOptions' => ['submenuOptions' => ['class' => 'pre-scrollable']],
            //'submenuOptions' => ['class' => 'pre-scrollable'],
            //'submenuOptions' => ['options' => ['class' => 'pre-scrollable']],
            //'submenuOptions' => ['dropDownOptions' => ['class' => 'pre-scrollable']],
            //'dropDownOptions' => ['dropDownOptions' => ['class' => 'pre-scrollable']],
            //'submenuOptions' => ['submenuOptions' => ['class' => 'pre-scrollable']],
            //'options' => ['submenuOptions' => ['class' => 'pre-scrollable']],
            //'options' => ['class' => 'pre-scrollable'],
            //'options' => ['dropDownOptions' => ['class' => 'pre-scrollable']],

            'items' => [
                ['label' => 'Dropdown menu item 1', 'url' => '#'],
                ['label' => 'Dropdown menu item 2', 'url' => '#'],
                ...
            ],
        ],
        ['label' => 'Contact', 'url' => ['/site/contact']],
    ],
]);

The commented out lines are some of the different ways I've tried to 'pass the HTML options to the yii\bootstrap\Dropdown widget' (in order of increasing desperation).

Please can someone put me right?

Thanks in anticipation!

Upvotes: 0

Views: 1023

Answers (1)

Alexey
Alexey

Reputation: 34

The option dropDownOptions is tested successfully on Yii version 2.0.11.2 and Bootstrap v3.3.7:

'dropDownOptions' => ['class' => 'pre-scrollable'],

The result is additional class of tag contained submenu items

<ul id="w4" class="pre-scrollable dropdown-menu">

If you are using yii2-bootstrap4 - that options apparently renamed to dropdownOptions.

See Nav::renderDropdown() in the sources:

/**
 * Renders the given items as a dropdown.
 * This method is called to create sub-menus.
 * @param array $items the given items. Please refer to [[Dropdown::items]] for the array structure.
 * @param array $parentItem the parent item information. Please refer to [[items]] for the structure of this array.
 * @return string the rendering result.
 * @throws \Exception
 */
protected function renderDropdown($items, $parentItem)
{
    /** @var Widget $dropdownClass */
    $dropdownClass = $this->dropdownClass;
    return $dropdownClass::widget([
        'options' => ArrayHelper::getValue($parentItem, 'dropdownOptions', []),
        'items' => $items,
        'encodeLabels' => $this->encodeLabels,
        'clientOptions' => false,
        'view' => $this->getView(),
    ]);
}

https://github.com/yiisoft/yii2-bootstrap4/blob/219d19fba47b5499f01764789c3cd3ce7306e0f9/src/Nav.php#L207

Upvotes: 1

Related Questions