Problème d'affichage/masquage en CSS

Résolu
heliconius Messages postés 539 Date d'inscription   Statut Membre Dernière intervention   -  
heliconius Messages postés 539 Date d'inscription   Statut Membre Dernière intervention   - 16 janv. 2021 à 19:08
Bonsoir,

je bloque sur un problème d'affichage/masquage en CSS. Pour éviter des km de code HTML, ci-dessous est reporté seulement un extrait du problème que je rencontre.

Le script complet est une gestion de carnet d'adresses. Entre autres renseignements, je propose la saisie de l'adresse mail et éventuellement de la clef PGP (publique) qui lui correspond. Pour ce faire, à côté du champ de saisie de l'adresse mail, se trouve une image (une petite clef).

Par défaut, le champ de saisie de la clef PGP (donc une ligne du tableau) est masqué. S'il n'y a pas de clef PGP pour cette adresse, on continue la saisie et on valide le tout qui sera enregistré dans une base de données MySQL.

S'il y a une clef PGP pour cette adresse, le fait de cliquer sur l'image "clef" devra faire apparaitre la ligne de tableau (ligne <tr id="onoff">...</tr>) pour permettre de coller dans le champ "pgp" la clef précédemment copiée dans le bloc-note. Le reste de la saisie est ensuite effectué avant l'enregistrement du tout.

Question styles, pour l'élément d'ID "onoff" (la ligne du tableau), si je mets :
- #onoff { display:none } : la ligne n'est pas affichée,
- #onoff { display:inline } : la ligne est complètement décalée (c'est dans un tableau)
- #onoff { display:run-in } : la ligne est correctement affichée

J'ai donc opté pour "none" et "run-in" et écrit la fonction javascript viewonoff().

L'instruction non commentée alert("In Fn") précise bien qu'en cliquant sur l'image je rentre dans la fonction mais je ne passe pas de "display:none" à "display:run-in" et la ligne PGP non affichée par défaut reste toujours non affichée. La bascule ne s'effectue pas. 

<!DOCTYPE html>
<html>
<head>
<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 }
#onoff { display:none }
</style>
<script language="javascript" type="text/javascript">
function viewonoff(){
	// alert("in Fn");
	row = document.getElementById('onoff');
	if(row.style.display == "none") {
		row.style.display = "run-in"; }
	else {
		row.style.display = "none";
	}
}
</script>
</head>

<body>
<form method="post" name="contact" action="#">

<table cellspacing="0" cellpadding="0">

  <tr>
    <td class="libel">Adresse mail</td>
    <td class="data">
      <input type="text" name="mail" size="50">
      <a href="javascript:viewonoff()"><img src="pgpkey.jpg"></a>
    </td>
  </tr>

  <tr id="onoff">
    <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>

</table>
<input type="submit" name="submit" value="Enregistrer">

</form>
</body>


C'est la deuxième journée que je me prends en vain la tête avec diverses façons de faire. Quelqu'un aurait-il une idée d'une solution possible ? Merci de votre aide.



Configuration: Windows / Firefox 52.0

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
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é 

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


0
Réponse 2 / 2
heliconius Messages postés 539 Date d'inscription   Statut Membre Dernière intervention   142
 
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 : 

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 ?
0
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
As tu testé la solution que je t'ai donné ?
Si non.. pourquoi ?*
0
heliconius Messages postés 539 Date d'inscription   Statut Membre Dernière intervention   142 > jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention  
 
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 : 

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.
0
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   4 746 > heliconius Messages postés 539 Date d'inscription   Statut Membre Dernière intervention  
 
Oui, c'est pour le debugage dans la console du navigateur.
Tu peux les retirer.
0
heliconius Messages postés 539 Date d'inscription   Statut Membre Dernière intervention   142 > jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention  
 
OK. Comme d'habitude, tu nous apprends toujours quelque chose.
Merci et bon week-end.
Question résolue.
0

Discussions similaires

Les images ne s'affichent plus
papyrus95 -
melle -

15 réponses
impossible de voir les photos et videos sur une conversation messenger
cortomaltese83 -
Oceii -

4 réponses
Probleme d'affichage google chrome
flyingvvv -
helo -

5 réponses
Problème d'affichage d'une page web.
mk51 -
mk51 -

33 réponses
Problème d'affichage/bugs graphiques sur Chrome sur Android
Narell -
Narell -

4 réponses