Aller au contenu
Support de Zwii et Yocto
Xide

[Résolu] Bouton 'Envoyer' tronqué (750px, 2/3 1/3)

Messages recommandés

Bonjour,

 

MERCI pour ce CMS simple et efficace.

Le site est en version 9.1.03, la largeur du site est  750px avec une mise en page 2/3 et colonne latéral à droite de 1/3.

Sur la page formulaire, le bouton 'Envoyer" est tronqué, il manque le "r" et le petit espace à droite. Voir image jointe.

Auriez-vous un solution SVP ?

Merci de votre attention.

Xide

Problème_bouton_envoyer.png

Modifié par Xide

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 2 heures, Xide a dit :

Le site est en version 9.1.03, la largeur du site est  750px avec une mise en page 2/3 et colonne latéral à droite de 1/3.

en ayant reproduit dans la même version zwii que toi la configuration de ta page (largeur du site en 750px) je te confirme bien qu'il y a un soucis de placement du titre dans le bouton "Envoyer" du formulaire de contact. (chez moi sur un écran en 1370px de large, le r de Envoyer est lui plus "collé" sur la droite du bouton à cliquer)

contact750px.png.71713bea96d5bc7ab2f91191b3eff14b.png

 

Dans ton cas bien précis d'utilisation du formulaire de contact, la solution est toute simple en attendant que le dev du cms trouve une solution:

Tu ajoute dans le custom perso du css ceci:

/* bug bouton contact */
button[type="submit"] {
padding-left: 0px;
padding-right: 0px;  
}

 

💡Cela aura pour effet d'annuler partout dans le zwii les marges droites et gauche  (padding) à l'intérieur du bouton de soumission de ton formulaire de contact; (attention cela à aussi effet sur tout les autre bouton de soumission du zwii)

 

Voici quelques captures d'écrans pour te montrer le résultat obtenu chez moi en reproduisant ta config actuelle..

 

resolve3.png.bd601d052ebb1866f1bfd3e95deeae23.png

 

contact750px.png.8928397ca68942d4685ca2dbd9d78165.png

 

resolve2.png.502770b6949ca85894d4c34ea0a5f1a9.png

 

resolve1.png.af165a7abb1bdd7314f7dfefb153cee2.png

 

Si besoin de plus d'infos, n'hésites pas à revenir vers nous.

Modifié par roger

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 35 minutes, augras a dit :

Je viens de faire le test sur 2 installations 9.1.03 en passant sur 750px de largeur et tout est normal chez moi.

Heu as tu reproduis exactement la configuration qu'a utilisé le membre et qui précise bien dans quelles conditions il a placé son formulaire de contact,

Il y a 2 heures, Xide a dit :

Le site est en version 9.1.03, la largeur du site est  750px avec une mise en page 2/3 et colonne latéral à droite de 1/3.

ceci est as mise en page de son formulaire de contact dans son site, et c'est pour son site tout entier.

 

Pourquoi je me permet d'intervenir ainsi, afin qu'il n'y ai pas confusion lors du report d'un "petit inconvénient" par d'autre, il faut avant toute chose reproduire les mêmes conditions d'utilisations lors de l'apparition de ce "truc" par le demandeur et fournir si possible des captures d'écran à minima pour confirmer le "petit inconvénient" si il existe ou non. C'est très important cette attitude à adopter pour vérifier une chose  (sauf des développeurs comme @Fred ou @Rémi qui sont plus aguerris à la chose et qui en général se placent dans les mes dispositions de configuration automatiquement pour une telle vérification)

 

💡 J'ai exactement recrée les mêmes conditions de paramétrage de la page du formulaire de contact que  et effectivement il y a une anomalie qui apparaît bien dans cette configuration précise; donc une solution provisoire qui fonctionne au dessus...avec les images qui vont bien pour montrer le "petit inconvénient" et une possibilité pour le réparer (provisoirement) avec le code que je lui soumet; donc logiquement je retrouve chez moi le même problème que notre ami membre avec d'ailleurs un décalage différent vers la droite du mot "Envoyer" comme le montre ma capture d'écran n°2 (dans doute liée à mon écran de pc ayant une résolution de1370px de large peut être?)

 

 

Modifié par roger
correction des fautes d'orthographe

Partager ce message


Lien à poster
Partager sur d’autres sites

@Xide merci pour ton retour, le problème que tu soulèves est un effet de bord consécutif à la barre latérale. 

 

Il est corrigé dans la version 1.9 du formulaire sur le git.

 

C'est une correction temporaire : la largeur du bouton n'est pas dynamique.

 

Remplacer la ligne 49 par

            <div class="col3 offset9">

D'ailleurs je note que des boutons d'édition sont trop petits dans cette dimension, un toilettage est nécessaire.

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonsoir messieurs et merci pour vos réponses

 

@augras merci pour le test mais je ne comprends pas pourquoi tu ne retrouves pas ce petit problème ^^

@roger Merci pour le test, la solution et aussi pour cette explication hyper détaillée avec des images qui valent 1000 mots. C'est comme ça que je rédigeais les explications sur le forum d'aide informatique que je gérais de 2005 à 2010
 

@Fred Merci pour la solution mais dans quel fichier je doit remplacer la ligne 49 indiquée ?

J'ai jeté un œil dans des fichiers CSS sans avoir trouvé de ligne 49 qui serait à remplacer ^^
Je me doutais bien qu'il s'agissait d'un petit problème de Zwii car je n'ai rien modifié au CSS et n'ai rien mis qui pourrait interférer avec le CSS.
Mon passif de création web : petits sites en html/css, un peu de php et j'ai beaucoup utilisé Joomla (bien trop lourd pour les sites que je faisais)

Merci pour ce CMS que je commence à utiliser depuis une semaine :)

Bonne soirée.

Xide

 

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 13 minutes, Xide a dit :

@roger Merci pour le test, la solution et aussi pour cette explication hyper détaillée avec des images qui valent 1000 mots. C'est comme ça que je rédigeais les explications sur le forum d'aide informatique que je gérais de 2005 à 2010

Bonjour Xide

C'est moi qui te remercie pour le compliment. En effet plus on détaille "la chose", plus elle sera compréhensible et assimilable par celui qui la lira.

J'oserais même dire plus l'ordre chronologique qui selon moi permet de bien relater les tutoriels, explications en tout gent dans un sujet, ce serait ceci:

1 vidéo vaut plus que toute les images/textes (l'alliance du  son et du visuel en "Live" permet de mieux comprendre ce que l'intervenant tenter d'expliquer) car elle offre un gain de temps formidable en toute choses.

1 image (voir plus) permet  de montrer de façon statique et visuel là où il faut intervenir. Couplé à une bonne explication texte suffisamment achalandée,détaillée , peut aussi aider mais demande beaucoup de temps en préparation et peu parfois ne pas suffire car l'on ne pense pas forcément à tout...écrire ou mettre en image.

1 texte (en un seul mot ou plusieurs mots) plus on en met de phrases et de mots, plus on a de chance que l'utilisateur final saura interpréter nos écrits. par contre c'est une demande de temps énorme pour rédiger le tout alors que les deux moyens évoqués au dessus le font bien plus rapidement.

 

Nous avons je vois les mêmes passions, moi aussi je fais ce genre de tutos sur l'informatique mais aussi dans d'autres endroits où nous "causons" OS et compagnie...donc ssuis habitué comme toi a beaucoup détailler ce que je tente d'expliquer.

Encore merci pour ton compliment, il me touche beaucoup Xide.

Roger

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 2 heures, Xide a dit :

Bonsoir messieurs et merci pour vos réponses

 

@augras merci pour le test mais je ne comprends pas pourquoi tu ne retrouves pas ce petit problème ^^

@roger Merci pour le test, la solution et aussi pour cette explication hyper détaillée avec des images qui valent 1000 mots. C'est comme ça que je rédigeais les explications sur le forum d'aide informatique que je gérais de 2005 à 2010
 

@Fred Merci pour la solution mais dans quel fichier je doit remplacer la ligne 49 indiquée ?

J'ai jeté un œil dans des fichiers CSS sans avoir trouvé de ligne 49 qui serait à remplacer ^^
Je me doutais bien qu'il s'agissait d'un petit problème de Zwii car je n'ai rien modifié au CSS et n'ai rien mis qui pourrait interférer avec le CSS.
Mon passif de création web : petits sites en html/css, un peu de php et j'ai beaucoup utilisé Joomla (bien trop lourd pour les sites que je faisais)

Merci pour ce CMS que je commence à utiliser depuis une semaine 🙂

Bonne soirée.

Xide

 

 

 

Bonsoir @Xide

 

En effet, je n'ai pas précisé le fichier à modifier 😅 . Cela n'a aucune importance : la correction est incluse dans la v9.1.04 publiée ce soir :

  • La présentation des boutons sur cette page d'édition d'un article de blog
  • Dans la taille 750px, la police de caractère est diminuée de 20% : sur d'autres écrans il y avait des effets de débordement dans cette petite dimension.

Merci pour ton retour qui a permis de corriger ces quelques problèmes malgré les tests poussés réalisés dernièrement par de grands spécialistes.

 

Pourrais-tu passer le titre du fil de discussion en résolu ?

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour messieurs :)

@roger la rédaction des tutos et explication m'a aussi permis d'apprendre car à cette époque je commençais à me lancer dans l'assistance. Cela aura été une super école pour me former à mon métier d'assistance hardware et d'assistance utilisateurs pour 64 écoles d'une grande ville. Métier que je n'exerce plus car j'ai changé de pays depuis fin 2017 :) (et j'avoue qu'après 15 ans à 15/16 h devant mes écran m'ont fait saturer :P )
En tout cas, il faut continuer comme ça ;)

@Fred Je viens d'effectuer la mise à jour auto et le problème est encore là. Versions CMS 9.1.04 ; module form 1.9
J'ai recrée une page formulaire avec un seul champ, même symptôme.
Je te fais parvenir le lien et des identifiants en MP, si besoin.
Si besoin d'autre chose ne pas hésiter à me demander, je répondrais en fin d'AM.

 

A noter que j'ai un deuxième site, largeur 960px (2/3 ; 1/3) mais que j'ai passé en 750px (2/3 ; 1/3) pour tester : le bouton est aussi tronqué

Belle journée à vous :)

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 2 heures, Xide a dit :

Je viens d'effectuer la mise à jour auto et le problème est encore là. Versions CMS 9.1.04 ; module form 1.9
J'ai recrée une page formulaire avec un seul champ, même symptôme.
Je te fais parvenir le lien et des identifiants en MP, si besoin.
Si besoin d'autre chose ne pas hésiter à me demander, je répondrais en fin d'AM.

 

A noter que j'ai un deuxième site, largeur 960px (2/3 ; 1/3) mais que j'ai passé en 750px (2/3 ; 1/3) pour tester : le bouton est aussi tronqué

 

Ce matin j'ai donc téléchargé cette nouvelle version mise  jour

Je tiens à préciser que je n'ai pas testés la version précédente ni même celle ci avant sa mise en ligne, donc installée exactement comme un utilisateur "ordinaire".

 

🤓 Pour ma part, en ayant paramétré le formulaire dans une page (2/3 . 1/3) comme tu le précises au dessus, et bien la correction apportée dans la v 9.1.04 par @Fred corrige parfaitement le centrage du texte du bouton envoyer dans le module form.

 

En attendant ton retour ou celui d'autres utilisateurs qui infirmeraient ou confirmeraient ce test ci, pour ma part je considère que la solution proposée à résolu chez moi ce problème apparu dans ma dernière version (9.1.04) en ligne du zwiicms mise à jour ce matin même.

 

🛠️ Capture d'écran qui montre la version utilisée puis vidéo qui montre en "Live" la correction appliquée par  au problème que  tu avais signalé ultérieurement plus haut.

 

ctn.png.bcbcbdefb048ff1abbf7654027758456.png

 

*petite précision: je viens juste de m’apercevoir d'une petite erreur dans le titre de mon site (je le nomme toujours en fonction de la version utilisée);

afin d"éviter une remarque à ce sujet(titre du site visible dans la vidéo) , je met ci dessous la correction apportée à l'instant sur cet étourderie de ma part 😞

er.thumb.png.a6dfdbf39217eed0cc149a719ba967a8.png

😖

 

 

Vidéo qui montre que ce soucis ne se reproduit pas chez moi à configuration égale du cms en exploitation

 

 

Modifié par roger
ajout d'une image pour préciser une erreur de texte de ma part

Partager ce message


Lien à poster
Partager sur d’autres sites

J'en ai profité pour pousser plus loin le test, ne pas me contenter d'un simple "Envoyer" pour le texte du bouton de soumission du formulaire, donc j'ai utilisé "Envoyer mon formulaire"

🤔 le résultat à donné ceci en 750 px de large pour le site:

fotc.png.11424546ad78646d155bcc83d6b9bf21.png

 

💡Une solution serait d'ajouter dans le module form, une ligne de style dans la correction apportée

<div class="col2 offset10" >

 

 

Ce qui rendrait le texte centré dans le cadre du bouton...

corc1.thumb.png.5f4fc2c8917a6f0b48fa803a8f849acf.png

 

 

💡 Et si l'on combine en % la largeur de l''offset on arrive alors à un résultat satisfaisant dans le cadre bien précis de ce nouveau test...

foct2.thumb.png.e4547ae07121bf11a7c4d8bf670b15b8.png

 

Modifié par roger

Partager ce message


Lien à poster
Partager sur d’autres sites

@roger indéniablement, il faudrait soit limiter la longueur de la chaine soir rendre dynamique la largeur du bouton, ou bien les deux.

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

@Xide le problème vient du fait que tu as fixé la hauteur de police à 15px; donc la réduction de 20% (0.8em) n'est pas suffisante pour tenir dans la largeur du bouton.

En réduisant la largeur du site tu dois jouer sur la taille de police fixée sur la même page. La hauteur de police des autres éléments (pied de page, bannière...) est  déterminée par rapport à cette taille.

 

image.png.caa92dcf1b39c487363aee9b2fd67822.png

 

Merci de passer le titre du fil de discussion à [RESOLU].

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 2 heures, Fred a dit :

il faudrait soit limiter la longueur de la chaine soir rendre dynamique la largeur du bouton, ou bien les deux.

la solution  la plus simple concernant le module Form c'est celle qui rendrait la largeur du bouton dynamique (sans devoir en limiter la longueur de la chaîne)

 

💡 Un simple bout de code css ajouté résoudra une bonne fois pour toute ce "petit inconvénient là" si tu désires le mettre en œuvre.

 

🛠️ Il faudra juste supprimer la dernière correction apportée pour le module Form à savoir remettre le bouton de soumission dans une simple div en enlevant (le nombre de colones et l'offset devenant alors inutile puisque le bouton lui même sera devenu "dynamique" grâce au css..

 

Ajouter ce code css soit dans le css perso du zwii, soit dans le common.css

[type="button"], [type="submit"], button {
    width: auto !important;
    float: right;
    margin-right: 10px;
}

 

ensuite tu supprimes dans /module/form/view/index/index.php ceci:     <div class="col2 offset10"> à la ligne 48

        <div class="row">
            <div class="col2 offset10">
                <?php echo template::submit('formSubmit', [
                    'value' => $this->getData(['module', $this->getUrl(0), 'config', 'button']) ? $this->getData(['module', $this->getUrl(0), 'config', 'button']) : 'Envoyer',
                    'ico' => ''
                ]); ?>
            </div>
        </div>

 

par cela:

        <div class="row">
            <div>
                <?php echo template::submit('formSubmit', [
                    'value' => $this->getData(['module', $this->getUrl(0), 'config', 'button']) ? $this->getData(['module', $this->getUrl(0), 'config', 'button']) : 'Envoyer',
                    'ico' => ''
                ]); ?>
            </div>
        </div>

 

😊 et tu obtiendras ceci quelle que soit la longueur du texte écrit pour le bouton "Envoyer" du formulaire. (elle est bien customisée depuis e matin cette version non,)

 

 

 

 

 

 

 

 

Modifié par roger

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 22 heures, Xide a dit :

@augras merci pour le test mais je ne comprends pas pourquoi tu ne retrouves pas ce petit problème ^^

Bonsoir,

Moi non plus, jusqu'à ce que je lise le message de @fred ci-dessus, et ça a fait tilt : j'ai fait le test en étant sur un site qui était paramétré en police signika 12 px ! Le problème n'apparaît ainsi pas.
Je trouve cette police très sympa et elle reste parfaitement lisible quelle que soit sa taille, mais en style maigre.

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 3 heures, roger a dit :

la solution  la plus simple concernant le module Form c'est celle qui rendrait la largeur du bouton dynamique (sans devoir en limiter la longueur de la chaîne)

 

💡 Un simple bout de code css ajouté résoudra une bonne fois pour toute ce "petit inconvénient là" si tu désires le mettre en œuvre.

 

🛠️ Il faudra juste supprimer la dernière correction apportée pour le module Form à savoir remettre le bouton de soumission dans une simple div en enlevant (le nombre de colones et l'offset devenant alors inutile puisque le bouton lui même sera devenu "dynamique" grâce au css..

 

Ajouter ce code css soit dans le css perso du zwii, soit dans le common.css


[type="button"], [type="submit"], button {
    width: auto !important;
    float: right;
    margin-right: 10px;
}

 

ensuite tu supprimes dans /module/form/view/index/index.php ceci:     <div class="col2 offset10"> à la ligne 48


        <div class="row">
            <div class="col2 offset10">
                <?php echo template::submit('formSubmit', [
                    'value' => $this->getData(['module', $this->getUrl(0), 'config', 'button']) ? $this->getData(['module', $this->getUrl(0), 'config', 'button']) : 'Envoyer',
                    'ico' => ''
                ]); ?>
            </div>
        </div>

 

par cela:


        <div class="row">
            <div>
                <?php echo template::submit('formSubmit', [
                    'value' => $this->getData(['module', $this->getUrl(0), 'config', 'button']) ? $this->getData(['module', $this->getUrl(0), 'config', 'button']) : 'Envoyer',
                    'ico' => ''
                ]); ?>
            </div>
        </div>

 

😊 et tu obtiendras ceci quelle que soit la longueur du texte écrit pour le bouton "Envoyer" du formulaire. (elle est bien customisée depuis e matin cette version non,)

 

 

 

 

 

 

 

 

 

Voilà une très bonne solution.

 

Partager ce message


Lien à poster
Partager sur d’autres sites

@roger, sauf que ça ne fonctionne pas. Ne cherche pas j'ai trouvé une solution. CSS de 3 lignes sans toucher au code. On peut fermer le sujet.

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a une heure, Fred a dit :

Voilà une très bonne solution.

 

edité car tu as répondu @Fred pendant que j'écrivais et postais ma réponse, donc on attendra la solution que tu nous dévoileras bientôt pour corriger ce "petit inconvénient"

Modifié par roger

Partager ce message


Lien à poster
Partager sur d’autres sites

 

#formSubmit {
	width: max-content;
	float: right;
}

suffira dans common.css

On ne touche à rien d'autre. Mais je garde le réglage de 0.8em en 750px pour les autres boutons, au moins on traite le cas général fonte : 12px et 750px de site.

Évidemment si l'admin met des tailles de police de fou on ne peut rien faire

 

image.png.ee995716449310033fc4c25da4f5ce63.png

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonsoir messieurs,

 

J'ai créé un nouvel utilisateur et dans cette nouvelle session avec un navigateur web tout propre le problème n’apparaît pas.

Le problème venait de mon affichage général sur 2 de mes 3 navigateurs.

La police mini à 15px, donc de mon coté le bug apparaissait encore sur le site et sur 2 nouvelles install de ma session usuelle.
 

Heureusement que ma question aura permis d'optimiser ce bouton ^^ 

Mille merci à vous pour votre patience et persévérance :)

 

Xide

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 14 minutes, Xide a dit :

Bonsoir messieurs,

 

J'ai créé un nouvel utilisateur et dans cette nouvelle session avec un navigateur web tout propre le problème n’apparaît pas.

Le problème venait de mon affichage général sur 2 de mes 3 navigateurs.

La police mini à 15px, donc de mon coté le bug apparaissait encore sur le site et sur 2 nouvelles install de ma session usuelle.
 

Heureusement que ma question aura permis d'optimiser ce bouton ^^ 

Mille merci à vous pour votre patience et persévérance 🙂

 

Xide

 

En effet, merci à toi.

Peux-tu changer le titre du fil ?

Merci

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


×
×
  • Créer...