Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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

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

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


Bonne soirée
Kam27

Kam27
**

Messages : 95
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 : 80
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 : 95
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
Membre habitué

Messages : 1583
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 : 95
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
Membre habitué

Messages : 1583
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 : 95
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


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