Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Disparition label au survol du champ


Sujet :

Survol d'un élément en CSS (:hover)

  1. #1
    Membre du Club
    Disparition label au survol du champ
    bonjour,
    Je me débats sur la disparition depuis longtemps du label au survol des champs du formulaire
    http://www.alterweb.info/fr/propose-site-web
    Cela fonctionne sous Chrome et pas sous Firefox et peut-être pas d'autres navigateurs.
    Est-ce que vous comprenez d'ou cela vient?

    J'avais la même chose avec les onglets qui a été résolu avec ce bout de code
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    /* empêche disparition de l'onglet au survol du champ */	
    #com-content-formTabs li a { 
        display: block !important;}

    Si vous pouviez m'aider à corriger ce problème!
    @+

  2. #2
    Expert confirmé
    comprends pas , ou ça un label ? => https://developer.mozilla.org/fr/doc.../Element/Label
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  3. #3
    Invité
    Invité(e)
    Bonjour,

    en effet....
    Il doit y avoir un script JS qui ajoute un "display:none;" dynamiquement sur le :hover.
    C'est tout ce que je peux dire...

    @psychadelic
    Exemple de label :
    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div class="control-group">
    			<label id="jform_title-lbl" for="jform_title" class="hasPopover required invalid" title="" data-content="Titre de l'article" data-original-title="Titre" aria-invalid="false">
    	Titre<span class="star">&nbsp;*</span></label>		
     
    	<input type="text" name="jform[title]" id="jform_title" value="" class="form-control inputbox required invalid" size="30" title="Titre de l'article" required="required" aria-required="true" aria-invalid="true">
    </div>


    Ce serait dû au "hasPopover" que ça ne m'étonnerais pas...

  4. #4
    Membre du Club
    Bonsoir,

    Citation Envoyé par jreaux62 Voir le message


    Ce serait dû au "hasPopover" que ça ne m'étonnerais pas...
    Bingo
    En mettant
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    label.hasPopover { 
    	display: inline-block !important;
    	}

    Tout redevient "normal"

    Du coup je ne comprends pas trop l'intérêt de ce hasPopover et surtout qui l'a mis car cela m'a occupé plus que quelques heures.
    Est-ce que vous pourriez m'indiquer dans quel fichier il se trouve et comment le trouver ?
    Je le ferai bien remonter à l'auteur
    Tout ce que je sais c'est que cela ne vient pas de Joomla, mais probable d'une des nombreuses extensions ou thème!
    Merci
    @+

  5. #5
    Membre du Club
    Trouver un terme dans tous les fichiers CSS
    Bonsoir,
    J'ai eu un problème d'affichage du à label.hasPopover !
    Comment faire une recherche globale dans tous les fichiers css du site joomla https://joomtest.zd.fr/index.php?opt...24&lang=fr qui en comportent beaucoup du aux extensions et thèmes?
    Je voudrai trouver le coupable pour faire remonter au développeur!
    @+

  6. #6
    Modérateur

    Bonjour,
    Citation Envoyé par herveD
    Je voudrai trouver le coupable pour faire remonter au développeur!
    c'est au développeur de trouver et de remédier à ce problème, pas à toi si tu en fais une bonne utilisation.

  7. #7
    Membre du Club
    Bonjour,

    Ca c'est dans l'idéal mais dans mon cas, il y en a plusieurs et je ne vais les importuner tous!

    Merci de m'indiquer comment trouver dans cette page les fichiers qui utilisent "hasPopover" ??

    @+
    ps: c’est toi qui a fusionner les discussions ? je trouve au contraire que ce n'est pas la même chose et que cela mériterait d'ouvir un autre fil. C'est d'ailleurs un sujet plus générique !

  8. #8
    Invité
    Invité(e)
    Bonjour,

    Regarde dans le code source ("Ctrl"+"U"), et cherche...
    Il n'y a pas de formule magique.

    On trouve ligne 112 :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    jQuery(function($){ initPopovers(); $("body").on("subform-row-add", initPopovers); function initPopovers (event, container) { $(container || document).find(".hasPopover").popover({"html": true,"trigger": "hover focus","container": "body"});} });

    Et à priori, la fonction popover fait partie de Bootstrap, via popper.js.
    Mais je doute que l'erreur vienne de là : elle aurait été corrigée depuis longtemps.

    A mon avis, il doit y avoir une AUTRE fonction, qui provoque une "interférence" *...

    * J'ai constaté que, en changeant d'onglet, l'onglet disparait aussi !
    Or, ils n'ont pas la classe "hasPopover"...
    Là, il semble que la classe "nav-link" soit en cause.

    Le mystère s'épaissit !

  9. #9
    Modérateur

    A mon avis, il doit y avoir une AUTRE fonction, qui provoque une "interférence" *...
    cela est fort probable quand on voit le code
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    	<script src="/media/jui/js/jquery.min.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/jui/js/jquery-noconflict.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/jui/js/jquery-migrate.min.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/plugins/system/helixultimate/assets/js/admin/blog-options.js" type="text/javascript"></script>
    	<script src="/media/system/js/polyfill.filter.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/system/js/polyfill.xpath.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/system/js/tabs-state.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/system/js/core.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<!--[if lt IE 9]><script src="/media/system/js/polyfill.event.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script><![endif]-->
    	<script src="/media/system/js/keepalive.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/system/js/punycode.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/system/js/validate.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/jui/js/chosen.jquery.min.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/editors/tinymce/tinymce.min.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/editors/tinymce/js/tinymce.min.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/system/js/html5fallback.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/jui/js/jquery.ui.core.min.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/jui/js/jquery.ui.sortable.min.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/system/js/mootools-core.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/system/js/mootools-more.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/system/js/modal.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/media/js/mediafield-mootools.min.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/plugins/content/econa/js/cropper.min.js" type="text/javascript"></script>
    	<script src="/plugins/content/econa/js/featherlight.min.js" type="text/javascript"></script>
    	<script src="/plugins/content/econa/js/jquery.ui.widget.js" type="text/javascript"></script>
    	<script src="/plugins/content/econa/js/jquery.fileupload.js" type="text/javascript"></script>
    	<script src="/plugins/content/econa/js/jquery.iframe-transport.js" type="text/javascript"></script>
    	<script src="/plugins/fields/econa/js/jquery.econa.js?v1" type="text/javascript"></script>
    	<script src="/plugins/fields/econa/js/app.js" type="text/javascript"></script>
    	<script src="/media/system/js/subform-repeatable.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/system/js/fields/calendar-locales/fr.js" type="text/javascript"></script>
    	<script src="/media/system/js/fields/calendar-locales/date/gregorian/date-helper.min.js" type="text/javascript"></script>
    	<script src="/media/system/js/fields/calendar.min.js" type="text/javascript"></script>
    	<script src="/media/jui/js/ajax-chosen.min.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/templates/shaper_helixultimate/js/popper.min.js" type="text/javascript"></script>
    	<script src="/templates/shaper_helixultimate/js/bootstrap.min.js" type="text/javascript"></script>
    	<script src="/templates/shaper_helixultimate/js/main.js" type="text/javascript"></script>

  10. #10
    Membre du Club
    Bonjour,

    Merci de vos idées
    J'ai l’intuition que cela vient de public_html/templates/shaper_helixultimate/js/popper.min.js

    Pas vu de problème avec la classe "nav-link ?

    Reste à l'auteur de me confirmer ar sinon j'ai du mal à chercher dans ces scripts de différents auteurs.

    D'autre part à l'intérieur de css (ou js), y a t-il un moyen de retrouver à l'aide des outils firefox de préférence (ou chrome) les fichiers qui ont un terme id ou class , car cela m'aiderait de manière pus générique?
    @+

  11. #11
    Rédacteur/Modérateur

    Salut

    à l'aide des outils firefox
    En faisant un Ctrl U, puis en cliquant sur le fichier .CSS, .JS ...... dans la fenêtre du code source, puis en cliquant Ctrl F de la page affichant le code du fichier externe, tu peux alors remplir le mot à rechercher ..... à moins que je n'ai pas compris ta demande.
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.

  12. #12
    Membre du Club
    Bonlour
    Ok mais cela ne av pas cherchez le bout de code css dans les fichiers téléchargés et vous avez vu qu'ils sont nombreux dans un cms !
    Reste à tâtonner ou avoir de l'intuition ou au pire , téléchargez tout sous mon ubuntu pour faire la recherche via un logiciel !?
    @+

  13. #13
    Invité
    Invité(e)
    Bonjour,

    je viens d'aller sur ce lien.

    Il semble que le problème a disparu ?

  14. #14
    Membre du Club
    Bonsoir,
    oui c'est résolu mais j'ai un mis un patch qui peut sauter lors d'une maj.
    C'est pour cela que ma dernière question est tjs d'actualité. J'avai crée un nouveau fil mais il a été fusionné avec celui-ci !!
    Bref si qq a une piste pour la recherche depuis un navigateur dans les fichiers inclus de la page de manière simple et élégante, je suis preneur mais c'est moins urgent .
    @+

  15. #15
    Modérateur

    Citation Envoyé par herveD
    Bref si qq a une piste pour la recherche depuis un navigateur dans les fichiers inclus de la page de manière simple et élégante
    faut pas rêver, une solution, qui ne passe pas par le navigateur, est de charger les sources, non minifiées, dans un dossier et de faire une recherche en incluant les sous dossiers, type grep ou en utilisant les possibilité offertes par les différents éditeurs que l'on trouve.

    La question qui se pose est : qu'est ce que tu vas chercher ?

    Les classes CSS déclarées et les éléments associées ou l'origine de ton dysfonctionnement ?

    Pour moi, c'est l'origine de ton dysfonctionnement que tu dois chercher.

    Quand on voit ce que tu intègres comme fichiers JavaScript, il ne fait aucun doute, ou presque, que c'est lié à un effet de bord.
    Un point important est qu'il est préférable de ne pas utiliser plusieurs bibliothèques, dans ton cas Jquery et MooTools, dans un même projet.

    En regardant un peu ton code, ... , je te propose d'abandonner ta « modal » SqueezeBox, réalisée avec MooTools et datant un peu.

    Commente dans ton code ces lignes
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <!--
    	<script src="/media/system/js/mootools-core.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/system/js/mootools-more.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    	<script src="/media/system/js/modal.js?b8c71844c4276204b8d409d6fca90dcc" type="text/javascript"></script>
    -->


    et le code JS qui si raccroche.

    Wait and see !

  16. #16
    Invité
    Invité(e)
    Bonjour,

    Sinon, la technique simple :

    • on ré-installe tout !
    • SURTOUT, on installe les extensions/plugins l'un après l'autre,
    • et on vérifie à chaque fois si le problème existe où pas.

    Ça permet généralement de cibler l'extension qui pose problème.

  17. #17
    Membre du Club
    Bonsoir,
    La solution "on réinstall tout " n'est pas valable dans mon cas car le problème existe sur plusieurs sites.
    Ok je comprends que la seule solution est de tout télécharger :-( et de faire la recherche sur un terme
    je chercherai qui charge les mootools pour voir avec l'auteur car c'est une page généré par un cms donc pas trop la main
    Merci pour votre attention

  18. #18
    Invité
    Invité(e)
    La solution "on réinstalle tout " est au contraire tout-à-fait valable pour cibler la source du problème, sur un "site test".

    Une fois ciblée, on peut corriger tous les sites.

    Comme l'a dit NoSmoking, certaines librairies/plugins sont incompatibles (noms de variables "globales" ou noms de fonctions communs,...).
    Il faut des conditions "NoConflict".

  19. #19
    Modérateur

    car c'est une page généré par un cms donc pas trop la main
    qu'est ce qui t'empêche d'en faire une copie et de faire des tests dessus ?