バージョン選択

フォーラム

メニュー

オンライン状況

50 人のユーザが現在オンラインです。 (40 人のユーザが フォーラム を参照しています。)
登録ユーザ: 1
ゲスト: 49
nyzaarr もっと...

サイト内検索

質問 > フロント機能 > スマホ画面ヘッダー部にも、PC画面ヘッダー部と同様の検索窓を設けたい

フロント機能

新規スレッドを追加する

フラット表示 前のトピック | 次のトピック
投稿者 スレッド
takeo
投稿日時: 2017/8/11 17:01
対応状況: 解決済
半人前
登録日: 2015/1/12
居住地:
投稿: 18
スマホ画面ヘッダー部にも、PC画面ヘッダー部と同様の検索窓を設けたい
[EC-CUBE] 3.0.15

スマホ画面の検索窓はデフォルトでは、右サイドの#drawerにありますが、そうではなくて、
スマホ画面ヘッダー部にも、PC画面ヘッダー部と同様の検索窓を設けたいと思っております。

search_product.twigを

<div class="header_bottom_area">
    <div id="search" class="search">
        <form method="get" id="searchform" action="{{ path('product_list') }}">
            <div class="drawer_block pc search_inner">
               {{ form_widget(form.category_id) }}
                <div class="input_search clearfix">
                    {{ form_widget(form.name, {'attr': { 'placeholder' : "商品名、キーワードを入力" }} ) }}
                    <button type="submit" class="bt_search"><svg class="cb cb-search"><use xlink:href="#cb-search" /></svg></button>
                </div>
            </div>
            <div class="drawer_block sp search_inner">
               {{ form_widget(form.category_id) }}
                <div class="input_search clearfix">
                    {{ form_widget(form.name, {'attr': { 'placeholder' : "商品名、キーワードを入力" }} ) }}
                    <button type="submit" class="bt_search"><svg class="cb cb-search"><use xlink:href="#cb-search" /></svg></button>
                </div>
            </div>
            <div class="extra-form">
                {% for f in form.getIterator %}
                    {% if f.vars.name matches '[^plg*]' %}
                        {{ form_label(f) }}
                        {{ form_widget(f) }}
                        {{ form_errors(f) }}
                    {% endif %}
                {% endfor %}
            </div>
        </form>
    </div>
</div>


のようにし、
<div class="drawer_block pc>

<div class="drawer_block sp>
で、検索窓の大きさをCSSで、PC画面の時と、スマホ画面の時で
変えてやりたいのですが、
PC画面での検索窓は表示されているのですが、スマホ画面での検索窓が表示されず(form.category_id の部分も出て来ず)、困っております。

Style.css は、

.search .drawer_block.pc input[type="search"] {
    width: 370px;
}
.search .drawer_block.sp input[type="search"] {
    width: 270px;
}


ぐらいしか追加記述していないので、cssの問題では無く、
search_product.twig の記述を間違えているのかと思っておりますが、判らず、どのようにしたら良いのか、ご教授頂きたくお願いいたします。
フラット表示 前のトピック | 次のトピック


題名 投稿者 日時
 » スマホ画面ヘッダー部にも、PC画面ヘッダー部と同様の検索窓を設けたい takeo 2017/8/11 17:01
     Re: スマホ画面ヘッダー部にも、PC画面ヘッダー部と同様の検索窓を設けたい tao_s 2017/8/13 20:58
     Re: スマホ画面ヘッダー部にも、PC画面ヘッダー部と同様の検索窓を設けたい umebius 2017/8/14 7:44
       Re: スマホ画面ヘッダー部にも、PC画面ヘッダー部と同様の検索窓を設けたい takeo 2017/8/15 15:38

 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,288名です
総投稿数は109,688件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1567
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.