Как решить проблему со стилями в Yii2?

Question

[Рома Антонюк]

Есть написан свой widget. Там я использую kartik/DepDrop. Проблема в том, что стили виджета подключаються после моих стилей. В чем может быть проблема?

Comments

[Максим Тимофеев]

Код виджета будет или звать экстрасенсов?

[Рома Антонюк]

Максим Тимофеев:

<?php
namespace frontend\widgets\stepFormWidget;

use frontend\models\Search;
use yii\base\Widget;
use yii\helpers\ArrayHelper;

class StepForm extends Widget
{
    public function init()
    {
        parent::init(); // TODO: Change the autogenerated stub
    }

    public function run()
    {
        $model = new Search();

        $itemsCountries = $model->getParams();
        $itemsCountries = ArrayHelper::map($itemsCountries['countries'], 'id', 'name');

        return $this->render('step-form', [
            'model' => $model,
            'itemsCountries' => $itemsCountries
        ]);
    }
}

и view

<?php
    use yii\widgets\ActiveForm;
    use yii\helpers\Html;
    use kartik\icons\Icon;
    use kartik\depdrop\DepDrop;
    use yii\helpers\Url;

?>

<section class="page-section tour-filter">
    <div id="main-filter" class="filter-content text-center step-1">
        <h1 class="filter-title side-padding">
            <span class="accent-color"><?= \Yii::t('main', 'hello') ?></span><br>
            <span class="font-weight-100"><?= \Yii::t('main', 'plan to spend time') ?></span>
        </h1>

        <div class="filter-index side-padding">
            <?= Html::a(Yii::t('main', 'tour type'), '#', ['class' => 'item']) ?>
            <div class="separator"></div>
            <?= Html::a(\Yii::t('main', 'country'), '#', ['class' => 'item']) ?>
            <div class="separator"></div>
            <?= Html::a('<span class="hidden-md-down">'.Yii::t('main', 'count').'</span><span class="hidden-md-up">'.Yii::t('main', 'ctn').'</span> '.Yii::t('main', 'people'), '#',
                ['class' => 'item']) ?>
            <div class="separator"></div>
            <?= Html::a(Yii::t('main', 'price'), '#', ['class' => 'item']) ?>
            <div class="separator"></div>
            <?= Html::a(Yii::t('main', 'date'), '#', ['class' => 'item']) ?>
        </div><!-- .filter-index -->

        <div class="filter-nav">
            <?= Html::a(Icon::show('angle-left') . ' <span class="text">'.Yii::t('main', 'tour type').'</span', '#', ['class' => 'btn btn-accent btn-lg prev to-step', 'data-step' => '']) ?>
            <?= Html::a('<span class="text">'. Yii::t('main', 'price') .'</span> ' . Icon::show('angle-right'), '#', ['class' => 'btn btn-accent btn-lg next to-step', 'data-step' => '']) ?>
        </div><!-- .filter-nav -->

        <?php
            $form = ActiveForm::begin([
                'action' => '/site/results',
                'enableAjaxValidation' => true,
                'enableClientValidation' => false
            ])
        ?>
        <div class="tours-types">
            <div class="owl-carousel">
                <?= Html::a('<div class="icon">
                            <svg width="64" height="55" viewBox="0 0 64 55">
                                <path fill="inherit" fill-rule="nonzero" d="M30.316 0c-3.369 0-6.737 1.7-6.737 6.798 0 1.825.147 2.136.526 3.718l2.316 9.667-12.526 7.754-11.369-6.692c-.378-.224-.871-.231-1.473-.105-.602.125-1.054.845-1.053 1.593.001.748.325 1.18.842 1.487l48.842 28.893c1.535.894 2.92 1.254 4.21 1.275.904 0 1.792-.119 2.527-.425 1.786-.74 2.903-2.08 3.684-2.868.392-.395.527-.877.527-1.38 0-.72-.434-1.484-1.369-1.594-.603-.071-1.093.15-1.474.637-.79 1.012-1.777 1.77-2.631 2.125-.854.354-1.798.416-3.79-.744L20.105 31.656l12.106-7.117c1.12-.775 1.69-2.28 1.368-3.612l-1.368-5.63 12.044 7.155 2.271 8.738c.26.978.977 1.822 1.895 2.231l7.684 3.4c5.41 2.392 6.181-2.808 2.737-4.314l-6.316-2.762L47.158 8.5 36.842 2.553C34.194 1.01 32 .003 30.316.003V0zm26.947 6.798c-3.72 0-6.737 3.044-6.737 6.799 0 3.755 3.017 6.798 6.737 6.798S64 17.352 64 13.597s-3.016-6.799-6.737-6.799z"/>
                            </svg>
                        </div>
                        <h3 class="title">'.Yii::t('main', 'mountain-skiing tours').'</h3>', '#', ['class' => 'tour to-step', 'data-step' => 2]) ?>

                <?= Html::a('<div class="icon">
                            <svg width="52" height="64" viewBox="0 0 52 64">
                                <path fill="inherit" fill-rule="evenodd" d="M12.56 40.19c0 3.328-2.699 6.027-6.026 6.027a6.028 6.028 0 1 1 6.027-6.026zm10.522-17.636a9.787 9.787 0 0 0-.955 3.783c.667-1.234 1.56-2.09 2.585-2.746a26.659 26.659 0 0 0-1.63-1.037zM16.64 34.992c-6.149-6.148.659-12.271-4.306-21.948 2.818 3.794 14.152 7.448 15.876 10.882-1.368-9.203-8.706-11.316-15.068-12.743 10.85 2.115 12.954-3.673 18.551-1.31-3.856-4.105-12.686-4.601-19.235-.127 3.78-3.855 10.49-4.296 13.101-8.91-6.368-1.167-12.611 3.846-13.883 8.79C12.046 6.493 10.534 1.7 13.54 0 8.824.155 6.795 6.918 9.157 10.02 4.672 7.872.58 12.957.603 16.52c1.904-2.375 5-3.99 7.975-4.885C2.904 14.709-.865 22.16.17 30.655c.207-5.043 5.8-9.116 9.122-16.913-2.015 6.138-1.23 17.424 7.347 21.25zm34.48-8.406c.075-6.485-5.248-10.075-11.084-10.826 2.891.104 6.953-.516 8.708 1.895-1.102-4.097-5.714-7.31-10.245-3.361 1.455-4.166-3.92-8.378-7.8-7.381 3.094.932 2.603 3.944 5.099 6.928a13.508 13.508 0 0 0-4.523-2.403c-1.242-.154-3.107-.037-5.543.938-.495.199-1.04.364-1.616.545.564.391 1.11.823 1.63 1.301 2.373.451 5.369 1.298 8.934.937-1.36.33-3.893.96-6.33 2.269a15.725 15.725 0 0 1 1.675 4.055c2.444-.758 4.918-1.635 6.773-3.84-1.171 5.447 4.595 14.192 3.367 19.882 2.816-6.21 1.623-15.822-1.365-20.604 5.167 6.47 9.811 6.528 12.32 9.665zm-35.986 23.15H.245v1.593h13.489c.427-.566.9-1.093 1.4-1.592zm21.042 0c.5.5.974 1.027 1.4 1.593h13.49v-1.592h-14.89zM16.51 22.925c.07-1.253.09-2.583-.063-4.016.641.362 1.308.722 1.982 1.085 3.06 6.42 5.634 14.797 6.38 25.393a14.763 14.763 0 0 0-2.931.463c-.634-9.404-2.76-16.974-5.368-22.925zm14.837.525c-2.14 5.024-4.336 12.275-5.183 21.922 1.001.033 1.98.168 2.924.395.906-10.598 3.483-18.12 5.738-22.886-.054-.25-.116-.499-.162-.746-1.096.557-2.22.963-3.317 1.315zm6.92 35.898c-.478-6.554-5.934-11.729-12.613-11.729-6.677 0-12.132 5.175-12.612 11.73h25.226zM10.016 64h30.827v-2.273H10.015V64z"/>
                            </svg>
                        </div>
                        <h3 class="title">'.Yii::t('main', 'beach holidays').'</h3>', '#', ['class' => 'tour to-step', 'data-step' => 2]) ?>

                <?= Html::a('<div class="icon">
                            <svg xwidth="35" height="64" viewBox="0 0 35 64">
                                <path fill="inherit" fill-rule="nonzero" d="M34.939 62.867l-5.943-13.116V47.46a.802.802 0 0 0-.8-.802h-.121c-.475-.123-1.16-.968-1.73-2.69-.66-1.984-1.026-4.624-1.04-7.449a.825.825 0 0 0 .02-.195l-.114-2.545c-.001-.018-.005-.039-.007-.057-.002-.015-.003-.03-.007-.045a.857.857 0 0 0-.028-.12l-.01-.023c-.014-.031-.026-.063-.043-.093-.005-.013-.013-.025-.02-.037a.547.547 0 0 0-.046-.07l-.028-.036c-.018-.022-.04-.042-.059-.063-.012-.01-.02-.019-.03-.03a1.213 1.213 0 0 0-.1-.073l-.019-.011c-.028-.015-.051-.029-.08-.042l-.03-.012c-.396-.409-1.548-2.887-2.666-8.116-1.201-5.609-1.862-12.096-1.862-18.268 0-.016-.003-.03-.004-.046a.865.865 0 0 0 .013-.149c0-1.258-.79-2.326-1.88-2.685V.802a.803.803 0 0 0-1.604 0v3.004c-1.088.359-1.88 1.426-1.88 2.686 0 .05.007.1.015.148 0 .015-.005.03-.005.046 0 6.172-.66 12.66-1.861 18.269-1.112 5.199-2.258 7.678-2.66 8.106a.774.774 0 0 0-.466.484l-.006.013-.011.044c-.006.02-.013.04-.016.063l-.002.013c-.003.014-.003.029-.005.042l-.006.06-.112 2.544a.795.795 0 0 0 .018.195c-.014 2.826-.38 5.465-1.04 7.45-.571 1.72-1.256 2.566-1.73 2.689h-.12a.802.802 0 0 0-.801.802v2.29L.072 62.868A.802.802 0 0 0 .802 64h6.012c.444 0 .803-.36.803-.801a.818.818 0 0 0-.042-.246.806.806 0 0 0 .042-.245c0-5.452 4.435-9.888 9.886-9.888 5.454 0 9.889 4.436 9.889 9.888 0 .087.017.167.042.245a.799.799 0 0 0-.042.246c0 .44.36.801.803.801h6.012a.805.805 0 0 0 .676-.367.799.799 0 0 0 .056-.766zM24.906 44.725c.26.74.565 1.395.907 1.933h-3.227l-.363-1.933h2.683zm-.471-1.606H21.92l-.321-1.71h2.492c.097.593.211 1.166.344 1.71zm-4.18-5.315H14.96a.804.804 0 0 0-.787.638l-.142.684-1.753-1.964h10.452l-1.594 1.787-.092-.492a.803.803 0 0 0-.787-.653zm.7 8.854h-6.856l1.511-7.25h3.98l1.364 7.25zm2.924-6.854h-1.355l1.24-1.39c.027.47.066.933.115 1.39zm-1.564-7.944l.073.182-2.513-1.113h2.103c.113.328.226.639.337.93zm-1.695 1.154h-2.313v-1.026l2.313 1.026zm.854-3.69h-3.167V27.32h2.63c.175.706.356 1.376.537 2.005zm-.912-3.609h-2.255V23.71h1.844a72.4 72.4 0 0 0 .411 2.005zm-1.017-5.614c.104.708.21 1.378.316 2.005h-1.554V20.1h1.238zM18.307 5.686l.003.004h-.003v-.004zm0 1.802h.27c.01 1.307.05 2.573.11 3.79h-.38v-3.79zm0 5.394h.475c.043.687.096 1.355.154 2.005h-.629v-2.005zm0 3.609h.785c.073.693.151 1.362.234 2.005h-1.02V16.49zM16.702 5.686v.004h-.003l.003-.004zm-.269 1.802h.269v3.79h-.38c.06-1.217.1-2.482.111-3.79zm-.205 5.393h.474v2.006h-.629c.058-.651.11-1.32.155-2.006zm-.31 3.61h.784v2.005h-1.018c.082-.642.16-1.311.234-2.005zm-.454 3.61h1.238v2.005h-1.555c.107-.627.213-1.297.317-2.005zm-.605 3.61h1.843v2.004h-2.255c.127-.577.267-1.247.412-2.005zm-.787 3.608h2.63v2.005h-3.168c.183-.629.364-1.3.538-2.005zm-1.38 4.54c.113-.291.226-.602.338-.93h2.103l-2.511 1.113.07-.182zm4.01.129v1.026h-2.315l2.315-1.026zm-5.336 2.63h12.276l.043.94h-12.36l.041-.94zm-.12 3.796l1.24 1.39h-1.355c.049-.457.086-.92.115-1.39zm-.328 2.995h2.637l-.357 1.71h-2.623a23.02 23.02 0 0 0 .343-1.71zm-.814 3.316h2.76l-.403 1.933H9.195c.345-.539.647-1.193.909-1.933zm-2.487 3.537h19.775v.861H7.617v-.861zM6.02 62.397H2.046l.772-1.705h3.376a11.585 11.585 0 0 0-.174 1.705zm.58-3.308H3.546l.762-1.686h3.009c-.282.538-.52 1.101-.715 1.686zm1.73-3.29H5.035l.762-1.684h4.09a11.503 11.503 0 0 0-1.557 1.684zm14.49-3.29c-.009 0-.015.003-.024.003a11.43 11.43 0 0 0-5.293-1.295c-1.906 0-3.705.47-5.29 1.295l-.024-.002H6.523l.809-1.785h20.346l.807 1.785h-5.664zm3.86 3.29a11.578 11.578 0 0 0-1.558-1.684h4.09l.764 1.684h-3.295zm1.014 1.604h3.008l.762 1.686H28.41a11.625 11.625 0 0 0-.715-1.686zm1.295 4.994a11.508 11.508 0 0 0-.173-1.705h3.375l.77 1.705H28.99z"/>
                            </svg>
                        </div>
                        <h3 class="title">'.Yii::t('main', 'city tours').'</h3>', '#', ['class' => 'tour to-step', 'data-step' => 2]) ?>

            </div>
        </div><!-- .tout-types -->

        <div class="country site-padding">
            <div class="countries">
                <h4>Страна</h4>

                <?= $form->field($model, 'country')->dropDownList($itemsCountries, ['class' => 'form-control selectpicker', 'prompt' => 'Страна'])->label(false) ?>
            </div>
            <div class="hotels">
                <h4>Отель</h4>
                <?=
                    $form->field($model, 'hotel')->widget(DepDrop::className(), [
                        'options' => ['prompt' => Yii::t('main', 'hotel')],
                        'type' => DepDrop::TYPE_SELECT2,
                        'select2Options' => [
                            'theme' => 'bootstrap',
                            'pluginOptions' => [
                                'allowClear' => true
                            ]
                        ],
                        'pluginOptions'=>[
                            'depends'=> ['search-country'],
                            'placeholder' => Yii::t('main', 'hotel'),
                            'url' => Url::to(['/site/hotels-list'])
                        ]
                    ])->label(false)
                ?>
            </div>
        </div>

        <div class="people-quantity side-padding">
            <h4><?= Yii::t('main', 'adults') ?></h4>
            <div class="adults number-control">
                <?= $form->field($model, 'adult_amount', [
                    'template' => '{input}'.Html::button('', ['class' => 'minus']).Html::button('', ['class' => 'plus'])
                ])->input('number')->label(false) ?>
            </div>

            <h4><?= Yii::t('main', 'children') ?></h4>

            <div class="pagination-buttons children-count">
                <?= $form->field($model, 'child_amount', [
                    'template' => '<div class="btn-group" data-toggle="buttons">{input}{error}</div>'
                ])->radioList([
                    0 => 0,
                    1 => 1,
                    2 => 2,
                    3 => 3
                ], [
                    'item' => function($index, $label, $name, $checked, $value) {
                        $checked = $checked ? 'checked' : '';
                        $active = $checked ? 'active' : '';

                        $return = '<label class="btn btn-white '.$active.'" data-children="'.$value.'">';
                        $return .= '<input type="radio" name="'.$name.'" value="'.$value.'" id="option2" autocomplete="off" '. $checked .'>'.$label;
                        $return .= '</label>';

                        return $return;
                    }
                ])->label(false);
                ?>
            </div>

            <div class="children-age hidden">
                <div class="small"><?= Yii::t('main', 'age of the children') ?></div>

                <div class="age-controls">
                    <div class="number-control childrens">
                        <?= $form->field($model, 'child_ages[first_child]', [
                            'template' => '{input}{error}'.Html::button('', ['class' => 'minus']).Html::button('', ['class' => 'plus'])
                        ])->input('number', [ 'id' => 'first_child'])->label(false) ?>
                    </div>

                    <div class="number-control childrens">
                        <?= $form->field($model, 'child_ages[second_child]', [
                            'template' => '{input}{error}'.Html::button('', ['class' => 'minus']).Html::button('', ['class' => 'plus'])
                        ])->input('number', [ 'id' => 'second_child'])->label(false) ?>
                    </div>

                    <div class="number-control childrens hidden">
                        <?= $form->field($model, 'child_ages[third_child]', [
                            'template' => '{input}{error}'.Html::button('', ['class' => 'minus']).Html::button('', ['class' => 'plus'])
                        ])->input('number', [ 'id' => 'third_child'])->label(false) ?>
                    </div>
                </div>
            </div>
        </div><!-- .people-quantity -->

        <div class="tour-price side-padding">
            <h4><?= Yii::t('main', 'price') ?></h4>

            <div class="price-range">
                <!-- docs - http://rangeslider.js.org -->
                <div class="small font-weight-500"><?= Yii::t('main', 'until') ?></div>
                <h4 class="price-value"><span class="accent-color">$</span> <output class="output"></output></h4>
                <?= $form->field($model, 'price_till')->input('range', ['min' => 0, 'max' => 10000])->label(false) ?>

            </div>
        </div><!-- .tour-price -->

        <div class="tour-date side-padding">
            <!-- https://github.com/longbill/jquery-date-range-picker -->
            <div class="date-range-wrap">
                <h4><?= Yii::t('main', 'date') ?></h4>
                <div class="date-range">
                    <?= $form->field($model, 'date_from', [
                        'options' => [
                            'class' => 'date-control form-group',
                        ]
                    ])->textInput([
                        'class' => 'form-control date-range-start empty',
                        'placeholder' => Yii::t('main', 'there')
                    ])->label(false) ?>
                    <?= $form->field($model, 'date_till', [
                        'options' => [
                            'class' => 'date-control form-group'
                        ]
                    ])->textInput([
                        'class' => 'form-control date-range-end empty',
                        'placeholder' => Yii::t('main', 'back')
                    ])->label(false) ?>
                </div>
            </div>
        </div><!-- .tour-date -->
        <?php $form::end()  ?>

        <div class="filter-pagination">
            <?= Html::a('', '#', ['class' => 'item active']) ?>
            <?= Html::a('', '#', ['class' => 'item']) ?>
            <?= Html::a('', '#', ['class' => 'item']) ?>
            <?= Html::a('', '#', ['class' => 'item']) ?>
            <?= Html::a('', '#', ['class' => 'item']) ?>
        </div><!-- .filter-pagination -->
    </div><!-- .step -->
</section><!-- .tour-filter -->

[Рома Антонюк]

Максим Тимофеев: виджет я использую в главном layout. Если использовать во view, тогда работает нормально

Answer 1

[Максим Тимофеев]

Рома Антонюк: Видимо Вы не понимаете что такое виджет и как его использовать. То что Вы сделали, надо было делать не как виджет, а как отдельное view. Виджет удобен для формирования зависимостей.
Так же не понятно, что Вы имеете в виду под Вашими стилями? И не мешало бы код layout приложить