Case 'Recherche'

[vadim 0]

Gilles,

Pour faire avancer le shmilblick...

En haut de page dans la fenêtre rechercher, quand j' (on ?) écris les premières lettres d'un produit du catalogue, une liste de propositions de recherches s'affiche

en dessous. C'est super pratique et ça donne, à mon avis, beaucoup de cachet au site...

Sauf qu'il apparaît un petit problème, cette liste passe derrière les menu...

Vadim future Peel 6.0.3 ;)

[Gilles Boussin 0]

Bonjour Vadim,

Il s'agit d'un problème d'interprétation des z-index, la liste est à 2000 et le menu ci-dessous est à 1500, donc on pourrait penser que ça passe au dessus, mais sur votre navigateur non.

Si vous modifiez le z-index du parent ça devrait aider : cherchez la ligne suivante dans modeles/xxxx/css/screen.css (ligne 218 sur ma version) :

#main_header #top_search {

et quelques lignes en dessous vous avez la mention d'un z-index, mettez le à 2000 également.

Gilles

[vadim 0]

bonjour Gilles,

chez moi c'était à 1100, je l'ai passé à 2000, ça marche, merci.

J'ai recherché, dans ce css et en dessous de '/* search in header */', à agrandir la fameuse cellule car j'ai des produit avec des noms un peu long, mais sans succès. Il faut peut-être intervenir à plusieurs endroit, mais ou ?

[Gilles Boussin 0]

Vadim,

Pour la recherche, c'est compliqué car le module AJAX autocomplete ajuste automatiquement certaines choses, dont la largeur.

Donc l'autocomplete prend la même largeur que le champ input dans lequel on tape le texte. C'est donc celui-ci qu'il faut changer si vous voulez une plus grande largeur.

Gilles

[vadim 0]

Gilles, je vous remercie pour la piste à suivre.

Je met mon bricolage ci-dessous, parce que j'y ai trouvé mon compte et que cela pourrait peut-être servir à d'autre.

Dans modeles/xxxx/css/screen.css à partir de la ligne 217 +/-

j'ai remplacé :

/* search in header */

#main_header #top_search {

position: absolute;

background-image: url('../images/image-recherche.png');

background-repeat: no-repeat;

background-position: center;

z-index:2000;

margin: 0px;

top: 10px;

left: 300px;

width: 397px;

height: 22px;

text-align: left;

vertical-align: middle;

}

#main_header #top_search form, #top_search fieldset, #top_search input {

position: absolute;

padding:0px;

margin:0px;

}

#main_header #top_search form {

border:0px;

}

#main_header #top_search fieldset {

border:0px;

}

#main_header #top_search form {

padding-left:30px;

}

#main_header #top_search input.bouton_go {

left:128px;

}

#main_header input#search {

width:120px;

top:2px;

}

#main_header select#brand {

position: absolute;

left: 200px;

top: 1px;

width:175px;

}

.sideblocktitle select#brand, .sideblock select#brand {

width: 200px;

margin: 2px;

}

.sideblocktitle #recherche fieldset, .sideblock #recherche fieldset {

border: 0px;

}

.sideblocktitle input#search, .sideblock input#search {

width: 140px;

}

par ces lignes:

/* search in header */

#main_header #top_search {

position: absolute;

background-image: url('../images/image-recherche.png');

background-repeat: no-repeat;

background-position: center;

z-index:2000;

margin: 0px;

top: 11px;

left: 300px;

width: 397px;

height: 24px;

text-align: left;

vertical-align: middle;

}

#main_header #top_search form, #top_search fieldset, #top_search input {

position: absolute;

padding:0px;

margin:0px;

}

#main_header #top_search form {

border:0px;

}

#main_header #top_search fieldset {

border:0px;

}

#main_header #top_search form {

padding-left:30px;

}

#main_header #top_search input.bouton_go {

left:140px;

}

#main_header input#search {

width:170px;

top:2px;

}

#main_header select#brand {

position: absolute;

left: 230px;

top: 0px;

width:158px;

}

.sideblocktitle select#brand, .sideblock select#brand {

width: 200px;

margin: 2px;

}

.sideblocktitle #recherche fieldset, .sideblock #recherche fieldset {

border: 0px;

}

.sideblocktitle input#search, .sideblock input#search {

width: 160px;

}

Maintenant j'ai mes cellules de recherche un peu plus grandes, de façon à éviter des sauts de lignes, sur les noms de produits un peu longs.