Как изменить стиль Kartik-V Typeahead?

Question

[Виктор Уманский]

Всем доброе утро. Подскажите как правильно стилизовать Typeahead от картика, как на картинки

<?php $form = ActiveForm::begin(
                [
                    'method' => 'post',
                    'action' => '/search/index',
                    'options' => [
                        'class' => 'search',
                    ],
                ]
            )
            ?>
$template = '<a href="{{link}}"><div><span style="margin-right: 20px"><img style="width: 35px" src="{{srs}}"></span><span>{{title}}</span><br/><span style="text-decoration:line-through;color: #d0111b">{{oldPrice}}</span>&nbsp;&nbsp;<span>{{price}}&nbsp;грн</span>&nbsp;</div></a>';
            <?= Typeahead::widget([
                'name' => 'product',
                'options' => ['placeholder' => 'Поиск по каталогу'],
                'pluginOptions' => ['highlight' => true],
                'dataset' => [
                    [
                        'limit' => 10,
                        'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('value')",
                        'display' => 'value',
                        //'prefetch' => $baseUrl . '/samples/countries.json',
                        'remote' => [
                            'url' => Url::to(['/search/product-list']) . '?q=%QUERY',
                            'wildcard' => '%QUERY'
                        ],
                        'templates' => [
                            'notFound' => '<div class="text-danger" style="padding:0 8px">Ничего не найдено.</div>',
                            'suggestion' => new JsExpression("Handlebars.compile('{$template}')")
                        ]
                    ]
                ],
            ]) ?>

            <?= Html::submitInput('поиск') ?>

            <?php $form = ActiveForm::end() ?>

сама верстка

<form action="#" class="search">
            <div class="btn-group">
                <button type="button" data-toggle="dropdown" class="dropdown-toggle">
                    <input type="search" list="dish" placeholder="Поиск по каталогу">
                    <input type="submit" value="Поиск">
                </button>

                <div class="dropdown-menu">
                    <a href="#">
                        <div class="img-prod">
                            <img src="img/prod.jpg" alt="">
                        </div>
                        <div class="prod-desc">
                            <h3>Неріса ФАО 200</h3>
                            <p><span class="price">670 грн.</span></p>
                        </div>
                    </a>
                    <a href="#">
                        <div class="img-prod">
                            <img src="img/prod.jpg" alt="">
                        </div>
                        <div class="prod-desc">
                            <h3>Неріса ФАО 200</h3>
                            <p><span class="old-price">700 грн.</span><span class="price">670 грн.</span></p>
                        </div>
                    </a>
                    <a href="#" class="show-more">Все результаты поиска<img src="img/show-all.png" alt=""></a>
                </div>
            </div>
        </form>

Comments

[sim3x]

Загрузите картинку на хабрасторадж

Спасибо

Answer 1

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

А при чем тут yii? Yii при тесном сотрудничестве с виджетом картика сгенерировали Вам html код. Как его стилизовать решаете Вы при тесном сотрудничестве с css.

Comments

[Виктор Уманский]

а как в Typeahead засунуть стили? У меня получается голый инпут и кнопка?

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

Виктор Уманский, Вы знаете как работает css?

[Виктор Уманский]

Максим Тимофеев, да знаю, проблема была в в папке assets, я ее почистил и стили в стали!