Problème d'affichage/masquage en CSS
Résolu/Fermé
heliconius
Messages postés
539
Date d'inscription
mardi 1 juillet 2008
Statut
Membre
Dernière intervention
23 juin 2023
-
15 janv. 2021 à 20:25
heliconius Messages postés 539 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 - 16 janv. 2021 à 19:08
heliconius Messages postés 539 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 - 16 janv. 2021 à 19:08
A voir également:
- Problème d'affichage/masquage en CSS
- Affichage double ecran - Guide
- Problème affichage fenêtre windows 10 - Guide
- Windows 11 affichage classique - Guide
- Comment agrandir l'affichage de l'écran - Guide
- Faire un trait en css ✓ - Forum CSS
2 réponses
jordane45
Messages postés
38346
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 décembre 2024
4 717
Modifié le 15 janv. 2021 à 21:15
Modifié le 15 janv. 2021 à 21:15
Bonjour,
La balise TR onoff ne disposant pas de l'attribut style, le js considère que sa valeur est "vide"
Il est préférable, dans ce cas, de définir le style dans la balise tr et non dans le css
voici le code corrigé
La balise TR onoff ne disposant pas de l'attribut style, le js considère que sa valeur est "vide"
Il est préférable, dans ce cas, de définir le style dans la balise tr et non dans le css
voici le code corrigé
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .libel { text-align:right; vertical-align:top; padding-right:5px; padding-bottom:2px; } .data { vertical-align:top; padding-left:5px; padding-bottom:2px; } thead tr th:first-child, tbody tr td:first-child { width: 8em; min-width: 8em; max-width: 8em; word-break: break-all; } </style> </head> <body> <form method="post" name="contact" action="#"> <table cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="libel">Adresse mail</td> <td class="data"> <input type="text" name="mail" size="50"> <a href="#" onclick="viewonoff()"> <img src="pgpkey.jpg"> </a> </td> </tr> <tr id="onoff" style="display:none;"> <td class="libel">Clef PGP</td> <td class="data"> <textarea name="pgp" cols="50" rows="6"> </textarea></td> </tr> <tr> <td class="libel">Autres champs</td> <td class="data">etc...</td> </tr> </tbody> </table> <input type="submit" name="submit" value="Enregistrer"> </form> <!-- Prends l'habitude de placer ton JS avant le </body> --> <script language="javascript" type="text/javascript"> function viewonoff(){ let row = document.getElementById('onoff'); let rowStyle = row.style; let newStyle = "none"; console.log('rowStyle.display = ',rowStyle.display); if(rowStyle.display == "none") { newStyle = ""; } console.log('style qui va etre appliqué :',newStyle); rowStyle.display = newStyle; } </script> </body> </html>
heliconius
Messages postés
539
Date d'inscription
mardi 1 juillet 2008
Statut
Membre
Dernière intervention
23 juin 2023
139
16 janv. 2021 à 01:26
16 janv. 2021 à 01:26
Re...,
Gros mystère !
J'ai trouvé quelque chose qui me parait incompréhensible.
Sur l'exemple, j'ai trouvé la solution en écrivant la fonction viewonoff() de cette façon :
et ça marche impeccable MAIS ...
J'ai reporté le code dans mon script (PHP, 3732 lignes). J'ai vérifié 5 fois (code javascript, lien vers cette fonction sur l'image, l'ID de la balise tr) : c'est exactement le même et ça ne marche plus. Je ne rentre même plus dans la fonction viewonoff() (le alert() étant décommenté) !!!
Est-il possible que la longueur d'un script puisse nuire au bon fonctionnement de
l'association HTML/CSS/Javascript ?
Gros mystère !
J'ai trouvé quelque chose qui me parait incompréhensible.
Sur l'exemple, j'ai trouvé la solution en écrivant la fonction viewonoff() de cette façon :
function viewonoff(){ // alert("in Fn"); row = document.getElementById('onoff'); if(row.style.display == "none") { row.style.display = "contents"; } else { row.style.display = "none"; } }
et ça marche impeccable MAIS ...
J'ai reporté le code dans mon script (PHP, 3732 lignes). J'ai vérifié 5 fois (code javascript, lien vers cette fonction sur l'image, l'ID de la balise tr) : c'est exactement le même et ça ne marche plus. Je ne rentre même plus dans la fonction viewonoff() (le alert() étant décommenté) !!!
Est-il possible que la longueur d'un script puisse nuire au bon fonctionnement de
l'association HTML/CSS/Javascript ?
jordane45
Messages postés
38346
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 décembre 2024
4 717
16 janv. 2021 à 10:23
16 janv. 2021 à 10:23
As tu testé la solution que je t'ai donné ?
Si non.. pourquoi ?*
Si non.. pourquoi ?*
heliconius
Messages postés
539
Date d'inscription
mardi 1 juillet 2008
Statut
Membre
Dernière intervention
23 juin 2023
139
>
jordane45
Messages postés
38346
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 décembre 2024
16 janv. 2021 à 17:24
16 janv. 2021 à 17:24
Bonsoir,
j'avais posté ma question hier et j'ai ensuite continué à chercher avec différentes valeurs de display que j'ai trouvées à la page https://developer.mozilla.org/fr/docs/Web/CSS/display :
Quand j'ai trouvé (sur l'extrait exemple) que la bascule entre display:none et display:contents fonctionnait, j'ai testé sur mon code complet et là, ça ne fonctionnait plus. 01:30 du matin, j'ai laissé tomber et suis parti me coucher.
Au réveil, j'ai trouvé ton message. Je viens de corriger sur mon code complet selon ton modèle et... ÇA FONCTIONNE ! Comme toujours... Mais je n'ai pas compris le "console.log('...')" C'est pour le debuggage quand on utilise "Outils / Développement web / Console du navigateur..." ?
Après ta réponse je note la question comme résolue. Merci encore une fois.
j'avais posté ma question hier et j'ai ensuite continué à chercher avec différentes valeurs de display que j'ai trouvées à la page https://developer.mozilla.org/fr/docs/Web/CSS/display :
display:block display:inline display:run-in display:flow display:flow-root display:table display:flex display:grid display:ruby display:block flow display:inline table display:flex run-in display:list-item display:list-item block display:list-item inline display:list-item flow display:list-item flow-root display:list-item block flow display:list-item block flow-root display:flow list-item block display:table-row-group display:table-header-group display:table-footer-group display:table-row display:table-cell display:table-column-group display:table-column display:table-caption display:ruby-base display:ruby-text display:ruby-base-container display:ruby-text-container display:contents display:none display:inline-block display:inline-table display:inline-flex display:inline-grid display:inherit display:initial display:unset
Quand j'ai trouvé (sur l'extrait exemple) que la bascule entre display:none et display:contents fonctionnait, j'ai testé sur mon code complet et là, ça ne fonctionnait plus. 01:30 du matin, j'ai laissé tomber et suis parti me coucher.
Au réveil, j'ai trouvé ton message. Je viens de corriger sur mon code complet selon ton modèle et... ÇA FONCTIONNE ! Comme toujours... Mais je n'ai pas compris le "console.log('...')" C'est pour le debuggage quand on utilise "Outils / Développement web / Console du navigateur..." ?
Après ta réponse je note la question comme résolue. Merci encore une fois.
jordane45
Messages postés
38346
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 décembre 2024
4 717
>
heliconius
Messages postés
539
Date d'inscription
mardi 1 juillet 2008
Statut
Membre
Dernière intervention
23 juin 2023
16 janv. 2021 à 18:25
16 janv. 2021 à 18:25
Oui, c'est pour le debugage dans la console du navigateur.
Tu peux les retirer.
Tu peux les retirer.
heliconius
Messages postés
539
Date d'inscription
mardi 1 juillet 2008
Statut
Membre
Dernière intervention
23 juin 2023
139
>
jordane45
Messages postés
38346
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 décembre 2024
16 janv. 2021 à 19:08
16 janv. 2021 à 19:08
OK. Comme d'habitude, tu nous apprends toujours quelque chose.
Merci et bon week-end.
Question résolue.
Merci et bon week-end.
Question résolue.