Réduire la largueur de barre de recherche du header — AwesomeBB

[Kam27]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Lien du forum : https://tavernanna2.forumactif.com/

Description du problème

Bonjour,

Je voulais savoir s'il y a moyen de réduire la largueur de la barre de recherche dans le header ?
J'ai déjà tenté de réduire le width mais après la barre bug dans l'affichage mobile.
J'ai fait un screen pour que vous voyez le problème dès que je modifie #search-main input dans mon css.

Un autre screen :

Spoiler:

Bonne soirée

[Lutins]

Bonsoir @Kam27,

Panneau d'administration  Affichage  Images et couleurs  Couleurs - Feuille de style CSS

Code:

#search-main input {
    width: 225px;
}

Actuellement, la largeur est paramétrée à 225px. Il vous suffit de mettre une valeur plus faible comme 100px par exemple.

[Kam27]

La barre se réduit mais après elle bug dans l'affichage mobile comme sur les précédents screens. é_è

Avec la modification :


Sans modification du css :


Le mot "rechercher" persiste à rester.

[Bipo]

Bonsoir,

Je ne comprends pas où se trouve le bug ? Le mot "Rechercher" qui est coupé ? Dans ce cas, mettez une valeur légèrement au-dessus pour que le mot "Rechercher" soit entier.

Si ce n'est pas ça le bug, merci de l'indiquer clairement sur votre screen

---

En reprenant le code donné par Lutins :

Code:

#search-main input {
   width: 120px!important;
}

Après avoir testé sur Mobile, je ne constate pas de problème.

[Kam27]

Il y a bien un problème, mais j'ai pas les bons mots pour l'expliquer.

Sans modification, le mot "rechercher" disparait :
https://cdn.discordapp.com/attachments/420303527433469953/793562044770680873/unknown.png

Mais quand je modifie le css celui-ci reste sans raison alors que la barre a disparu. Il devrait avoir seulement l'icône sur lequel on appuie qui reste :
https://media.discordapp.net/attachments/420303527433469953/793561736712159262/unknown.png?width=1085&height=610

édit :
Autre chose. Quand on utilise le bouton rechercher avec votre modification, celle-ci dégénère :

[Bipo]

Re,

Au temps pour moi, je n'ai pas testé avec le même navigateur que le vôtre. Je ne comprenais pas pourquoi je n'avais pas les mêmes visuels !

Il faudrait supprimer mon code précédent et le remplacer par celui-ci :

Code:

#search-main input {
  max-width: 160px!important;
}

Tenez-moi informé !

[Kam27]

Merci
C'est résolu.