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

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Kam27 Mar 29 Déc 2020 - 19:13

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
Kam27

Kam27
**

Messages : 97
Inscrit(e) le : 19/12/2016

Voir le profil de l'utilisateur https://firemblemcfe.forum2jeux.com/
Kam27 a été remercié(e) par l'auteur de ce sujet.

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

Message par Lutins Mar 29 Déc 2020 - 19:54

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.

santa
Lutins

Lutins
Lutins
Lutins

Messages : 100
Inscrit(e) le : 20/12/2020

Voir le profil de l'utilisateur https://forum.forumactif.com
Lutins a été remercié(e) par l'auteur de ce sujet.

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

Message par Kam27 Mar 29 Déc 2020 - 20:34

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

Avec la modification :
Réduire la largueur de barre de recherche du header — AwesomeBB Unknown

Sans modification du css :
Réduire la largueur de barre de recherche du header — AwesomeBB Unknown

Le mot "rechercher" persiste à rester.
Kam27

Kam27
**

Messages : 97
Inscrit(e) le : 19/12/2016

Voir le profil de l'utilisateur https://firemblemcfe.forum2jeux.com/
Kam27 a été remercié(e) par l'auteur de ce sujet.

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

Message par Bipo Mar 29 Déc 2020 - 20:39

Bonsoir,

Je ne comprends pas où se trouve le bug ? drunken 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 Smile



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

Bipo
Rédactif
Rédactif

Messages : 2705
Inscrit(e) le : 23/09/2010

Voir le profil de l'utilisateur
Bipo a été remercié(e) par l'auteur de ce sujet.

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

Message par Kam27 Mar 29 Déc 2020 - 20:54

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 :
Réduire la largueur de barre de recherche du header — AwesomeBB Unknown
Kam27

Kam27
**

Messages : 97
Inscrit(e) le : 19/12/2016

Voir le profil de l'utilisateur https://firemblemcfe.forum2jeux.com/
Kam27 a été remercié(e) par l'auteur de ce sujet.

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

Message par Bipo Mar 29 Déc 2020 - 21:27

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é !
Bipo

Bipo
Rédactif
Rédactif

Messages : 2705
Inscrit(e) le : 23/09/2010

Voir le profil de l'utilisateur
Bipo a été remercié(e) par l'auteur de ce sujet.

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

Message par Kam27 Jeu 31 Déc 2020 - 1:42

Merci Smile
C'est résolu.
Kam27

Kam27
**

Messages : 97
Inscrit(e) le : 19/12/2016

Voir le profil de l'utilisateur https://firemblemcfe.forum2jeux.com/
Kam27 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum