web-dev-qa-db-ja.com

検索アイコンをタブレットに表示するのに苦労

私はかなり具体的な問題を抱えており、何が起こっているのか理解できないようです。

クリックするとVM検索をドロップダウンで開くFontawesome検索アイコンがあります。これは、ほとんどのモバイル画面サイズとデスクトップで正常に機能しますが、たとえばChrome開発ツールとアイコンを横向きにしてiPhone Xを選択すると、アイコンが表示されません。クラスをクリックして、何も表示されません。この画面サイズでは何も表示されないため、なぜ表示されないのか完全にわかりません。

関連するコードは次のとおりです。

<div class="serchline">
<form action="/all-products/results,1-24?search=true" method="get">
<div class="searchsearch">
<input style="vertical-align :middle;" name="keyword" id="mod_virtuemart_search" maxlength="100" alt="Search" class="inputboxsearch ac_vm ac_input" type="text" size="100" value="Type text and hit enter" onblur="if(this.value=='') this.value='Type text and hit enter';" onfocus="if(this.value=='Type text and hit enter') this.value='';" autocomplete="off"></div>
<input type="hidden" name="limitstart" value="0">
<input type="hidden" name="option" value="com_virtuemart">
<input type="hidden" name="view" value="category">
</form>
<div class="ac_result" style="display:none;"></div>
<div class="sropen"><i class="fa fa-search"></i></div>
<div class="srclose"><i class="fa fa-times"></i></div>
</div>

これを修正したいので、現在サイトを開発モードにフリックしました。サイトを表示するには、クリックする必要があります ここ

私はこれについてかなり長い間頭を悩ませてきたので、誰かが助けてくれることを望んでいました。

更新：幅が768pxを超えるとアイコンが消えるように見えるので、これに関連する可能性のあるメディアクエリを見つけようとします。

cssvirtuemartsearch
1
Dtorr1981

わかりました。次の点を掘り下げて、問題を修正しました。

@media (min-width:768px) and (max-width:991px) {    
#t3-mainnav .t3-navbar.navbar-collapse.collapse { 
        display:block; 
        height:0px; 
        border:none; 
        background:none; 
        box-shadow:none; 
        position:static;
    }
    .t3-megamenu {
        display:none;
    }
}

この問題は、レスポンシブ設定を変更すると検索アイコンが表示されなくなる、テンプレート開発者によって作成されたいくつかのテンプレートのカスタマイズによるものと思われます。

コメントありがとうございます。 :)

2
Dtorr1981

検索機能は、狭い画面幅では非表示になっているナビゲーションバーにあります。

関連するHTMLは次のとおりです。

<div class="t3-navbar navbar-collapse collapse">

対応するCSSは次のとおりです。

.collapse {
  display: none;
}

最も簡単な解決策は、画面幅を狭めるために、代替モジュール位置に追加の検索モジュールを追加することです。

2
Neil Robertson