web-dev-qa-db-fra.com

Lutte pour que l'icône de recherche s'affiche sur les tablettes

J'ai un problème assez spécifique et je n'arrive pas à comprendre ce qui se passe.

J'ai une icône de recherche Fontawesome qui, lorsque vous cliquez dessus, ouvre une recherche VM dans une liste déroulante. Cela fonctionne très bien sur la plupart des tailles d'écran et ordinateurs de bureau mobiles, mais, par exemple, lorsque vous utilisez Chrome Outils de développement et sélection de l'iPhone X en mode paysage, l'icône n'est pas visible. J'ai parcouru les classes et je ne vois aucun affichage: aucun sur cette taille d'écran, donc je ne sais pas pourquoi il ne s'affiche pas.

Le code associé est:

<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>

J'ai passé le site en mode Dev pour le moment car je veux que cela soit corrigé, donc pour voir le site, vous devrez cliquer ici

J'espérais que quelqu'un serait en mesure d'aider, car je réfléchis à cela depuis un certain temps maintenant.

MISE À JOUR: L'icône semble disparaître lorsque la largeur dépasse 768px, donc je cherche toujours à trouver une requête multimédia qui pourrait être liée à cela.

cssvirtuemartsearch
1
Dtorr1981

Ok, après un peu plus de détails, le problème suivant a été résolu:

@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;
    }
}

Le problème était apparemment dû à certaines personnalisations de modèles créées par le développeur de modèles qui, lors de la modification des paramètres réactifs, empêchaient l'icône de recherche de s'afficher.

Merci à tous pour vos commentaires. :)

2
Dtorr1981

La fonction de recherche se trouve dans la barre de navigation qui est masquée sur des largeurs d'écran plus étroites.

Le HTML pertinent est:

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

et le CSS correspondant est:

.collapse {
  display: none;
}

La solution la plus simple consiste probablement à ajouter un module de recherche supplémentaire dans une autre position de module pour des largeurs d'écran plus étroites.

2
Neil Robertson