How to understand layout behavior in yii2?

A

Alexander Stepanov2018-04-10 08:43:06

Yii

Alexander Stepanov, 2018-04-10 08:43:06

I am making a website in yii2. Everything is fine, but... modal windows are not needed on all pages - I insert the layout into the desired view and it... is not displayed.. it works, but somewhere very deep and z-index does not pull it out...
A similar problem and in other places. It is necessary to make the block fixed to the bottom of the window, and if the layout is not written in laout, then fixed does not work correctly and presses the block to the bottom of the parent.
What could be the problem? Maybe I'm missing some important feature or should there be such blocks only in the layout?
layout template code:

use yii\bootstrap\Modal;
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use frontend\assets\AppAsset;
use common\widgets\Alert;
use yii\helpers\Url;
use frontend\widgets\LoginFormWidget;

$session = Yii::$app->session;

AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>

    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<div id="p_prldr"><div class="contpre"><span class="svg_anm"></span><br>Please wait<br><small>page loading...</small></div></div>
<?php $this->beginBody() ?>

<div class="wrap">
    <?php
    NavBar::begin([
        'id' => 'main-nav',
        'brandLabel' => '<img src="/upload/logo.png" alt="DFW logo">',
        'brandUrl' => Yii::$app->homeUrl,
        'options' => [
            'class' => 'navbar-inverse navbar-collapse',
        ],
    ]);
    $menuItems = [
      ['label' => 'Main', 'url' => ['/site/index'], 'options' => ['class' => 'nav-item']],
        ['label' => 'Shop on-line', 'url' => ['/shop/index'], 'options' => ['class' => 'nav-item'], 'active' => $this->context->id == 'shop'],
        ['label' => 'Contacts', 'url' => ['/site/contact'], 'options' => ['class' => 'nav-item']],
    ];
    if (Yii::$app->user->isGuest) {
        $menuItems[] = ['label' => 'Login | Signup', 'url' => '#', 'options' => ['class' => 'auth']];
    } else {
        $menuItems[] = '<li>'
            . Html::beginForm(['/site/logout'], 'post')
            . Html::submitButton(
                'Logout (' . Yii::$app->user->identity->username . ')',
                ['class' => 'btn btn-link logout']
            )
            . Html::endForm()
            . '</li>';
    }
    echo Nav::widget([
        'encodeLabels' => false,
        'options' => ['class' => 'nav nav-stacked'],
        'items' => $menuItems,
        'activateParents' => false
    ]);
    NavBar::end();
    ?>

    <div class="container page-container col-md-12">
        <?php if (Yii::$app->controller->id == 'shop' || Yii::$app->controller->id == 'cart'): ?>

            <div id="shop-nav" class="shop-nav-wrap container-fluid">

                <div class="shop-nav_top">
                    <button class='cmn-toggle-switch cmn-toggle-switch__htx'><span>toggle menu</span></button>
                    <ul class="shop-nav_top-menu">
                        <li><a href="<?= Url::to('/shop/sale') ?>">Sale</a></li>
                        <li><a href="<?= Url::to('/shop/new') ?>">New</a></li>
                        <li><a href="<?= Url::to(['/shop/category', 'id' => 1]) ?>">Clothes</a></li>
                        <li><a href="<?= Url::to(['/shop/category', 'id' => 2]) ?>">Shoes</a></li>
                        <li><a href="<?= Url::to(['/shop/category', 'id' => 3]) ?>">Accessories</a></li>
                    </ul>
                </div>
                <hr>
                <div class="shop-nav_bottom">
                    <p <?= isset($session['cart.qty']) ? 'class="show-cart-top"' : '' ?> style="display: inline-block;"><i class="fas fa-shopping-bag"></i> <span><?= isset($session['cart.qty']) ? $session['cart.qty'] : 0 ?></span></p> <?= Yii::$app->user->isGuest ? '<i class="far fa-heart auth" aria-hidden="true"></i>' : '<p  id="wish-list" style="display: inline-block;"><i class="far fa-heart" aria-hidden="true" style="display: inline-block; cursor: pointer;"></i></p>' ?>
                    <span>
                        <?= \Yii::$app->wishlist->getUserWishlistAmount(); ?>
                    </span>
                </div>

            </div>

        <?php endif; ?>

        <?= Alert::widget(); ?>

        <?= $content ?>

    </div>
</div>

<footer class="footer">
    <div class="container">
        <p class="pull-left">&copy; <?= Html::encode(Yii::$app->name) ?> <?= date('Y') ?></p>

        <p class="pull-right"><?= Yii::powered() ?></p>
    </div>
</footer>

<!-- Authentication modal-->
<div class="modal modal-warning" id="modal-auth" style="display: none; padding-right: 10px; animation-delay: 2s">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span></button>
                <h2 class="modal-title">Authentication</h2>
            </div>
            <div class="modal-body">
                <dl class='tab horizontal'>
                    <?= (Yii::$app->user->isGuest ? LoginFormWidget::widget([]) : ''); ?>
                </dl>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<?php if (Yii::$app->controller->id == 'shop'): ?>


<?php if (!(Yii::$app->user->isGuest)): ?>
    <!--  Wishlist modal  -->
    <div class="modal modal-warning" id="modal-wish-list" style="display: none; padding-right: 10px;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h2 class="modal-title">Wish list</h2>
                </div>
                <div class="modal-body">

                    <?php $wishlist = Yii::$app->wishlist->getUserWishList();
                    foreach ($wishlist as $wish): ?>

                        <a class="mini-item col-md-4 col-sm-6 col-xs-12" href="<?= Url::toRoute(['shop/view', 'id' => $wish->id]); ?>">
                            <div>

                                <img src="<?= $wish->getImage()->getUrl('150x150') ?>" alt="">
                                <p>
                                    <?= $wish->title ?>
                                </p>
                                <p>
                                    <?= $wish->designer['brand_name'] ?>
                                </p>
                                <p>
                                    <?= $wish->price ?>
                                </p>

                            </div>
                        </a>

                    <?php endforeach; ?>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
<?php endif; ?>

    <?php Modal::begin([
        'id' => 'cart',
        'size' => 'modal-md',
        'header' => '<h2>' . Yii::t("app", "Cart") . '</h2>',
        'footer' => '<button type="button" class="btn btn-default" data-dismiss="modal">' . Yii::t("app", "Begin shopping") . '</button><a href="' .  Url::to(["cart/view"] ) .  '" class="btn btn-success">' . Yii::t("app", "Checkout") . '</a><button type="button" class="btn btn-danger" onclick="clearCart()">' .  Yii::t("app", "Clear cart") . '</button>',
    ]);
    Modal::end();
    ?>

<?php endif; ?>

<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

I inserted modals and a menu for one section here - they behave correctly, but if I insert it into the shop view, then all the blocks want to be, only in a wrapper (in this case, shop-new)
Page view:

<div class="shop-new col-md-12 animated bounceInLeft">

<h1>
    New
</h1>

<?php Pjax::begin([
    'id' => 'productList',
    'enablePushState' => false,
    'enableReplaceState' => false,
]); ?>

    <?php $form = ActiveForm::begin([
        'id' => 'filter-form',
        'action' => 'new',
        'method' => 'get',
        'options' => ['data-pjax' => true],
    ]); ?>

    <div class="new-sortFilter-nav status_chk">
       <?php echo $this->render('_search', ['model' => $searchModel, 'categories' => $categories]); ?>
    </div>
    <?php ActiveForm::end();?>

<?= $this->render('_loop', ['dataProvider' => $dataProvider, 'searchModel' => $searchModel]); ?>

<?php Pjax::end(); ?>

</div>

I would have sinned on the jacket, but the store menu and modals, before being transferred to the layout, were not inserted into it, but the menu was located above it ... Yes, and I already used the jacket after I built the menu ...
It, of course , you can write conditions for where to display, and where not to, and all such elements are included in the template file, but it seems that this is a crutch under a thick layer of blue electrical tape .....

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

A

Alexander Stepanov, 2018-04-11
@Exebeche

By trial and error, scientific poke and near-scientific theories, it was found that the inadequate behavior of the blocks was caused by the use of the animate.css library - it was in blocks with animation classes that there were "inadequate behaviors".
I removed the animation classes and everything fell into place ... and the modals are smart and the filter block becomes where it needs to be.
(:

M

Maxim Timofeev, 2018-04-10
@webinar

1. It is worth solving the problem divorced from yii, it has nothing to do with it. Copy the resulting html, put it in the sandbox and debug, give a link to the sandbox.
2. I usually make 1 modal in the layout, and in the button that opens it I store info (in data attributes), according to which I load content into this modal. 1 time the script was written and used throughout the project.
3. By the way, the bootstrap modal is another adventure. Maybe you should look towards alertifyjs.com - through it you can display flash messages and do modals, in short, a convenient thing.

M

Maxim, 2018-04-10
@Mx21

> blocks should be, only in layout?
It is not necessary to insert the code of the modal window only in the layout. A modal window can also be in views, only in one view. Everything depends on the task. But, usually, it is better to place a modal in the layout if this window is present on other pages.
In general, it is better to move away from yii js, including pjax. It is better to put a separate js-plugin under modals.