Discussion :

[thirt750530]

Bonsoir à tous,

en fait, j'ai un tableau avec des colonnes dans lesquelles j'ai des icônes.

L'utilisateur peut cliquer sur ces icônes pour effectuer différentes actions.

Le problème, c'est que ces icônes sont difficilement accessibles notamment sur la version smartphone de la page.

Vous pouvez avoir un aperçu de la page avec le lien suivant :

https://codepen.io/joseph5/pen/jOqRpNm

Comment puis-je faire pour que la zone cliquable soit extensible sans augmenter de trop la hauteur des lignes ?

Merci d'avance.

Bonne soirée,
Thierry

[NoSmoking]

Bonjour,
j'ai du mal à comprendre pourquoi l'utilisation d'une <table> pour l'affichage de ces données, ceci étant tu dimensionnes tes icônes à 16px alors il ne faut pas s'attendre à des miracles !

[thirt750530]

Bonjour NoSmoking,

tout d'abord, je tenais à vous remercier pour votre aide.

En fait, j'utilise une table car j'ai plusieurs enregistrements ayant la même structure.

En fait, je m'excuse mais je n'avais mis que le code en rapport avec la version smartphone.

En fait, sur la version smartphone, j'ai fait en sorte de mettre sur une seule ligne toutes les icônes qui correspondent à différentes actions.

Seulement, je ne sais pas si je m'y suis bien pris à ce niveau-là en utilisant un display: table-cell. Apparemment, j'essaie de centrer toutes ces icônes mais je n'y arrive pas.

Si vous le souhaitez, voici le code de la page en codepen :

https://codepen.io/joseph5/pen/GRZaGea

Merci pour votre aide.

Bonne journée,
Thierry

[NoSmoking]

Dans ton code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<td class="action-icon">
  <span class="update_item">
    <img src="http://lorempixel.com/16/16" alt="modifier" class="img-update">
  </span>
</td>

l'élément <span> sert à quoi ?

Tant que tu mettras une largeur en fixe, ton image fera cette largeur.

Modifie dans un premier temps en mettant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.img-view, .img-update, .img-delete, .img-setup {
    width: 100%;
    height: auto;
}

[thirt750530]

Bonjour NoSmoking,

tout d'abord, je tenais à vous remercier pour votre aide.

En fait, la classe qui est assignée au span sert à pouvoir faire appel à une requête Ajax au cas où l'utilisateur clique sur l'icône. L'action derrière cet icône est de pouvoir mettre à jour les éléments de la ligne du tableau dans la base de données. C'est à ça que sert ce span. N'est-ce pas une bonne méthode, dois-je procéder autrement ?

Merci encore pour votre aide.

Bonne journée,
Thierry

[NoSmoking]

Pour arriver à tes fins je modifierais la structure de la <table> en plaçant tous les boutons dans la même cellules.

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
    <tr>
      <td data-column="Libellé">
        <input type="text" class="input-text" placeholder="Libellé" name="label_<?= $i; ?>" value="" required />
      </td>
      <td data-column="Description">
        <input type="text" class="input-text" placeholder="Description" name="description_<?= $i; ?>" value="" required />
      </td>
      <td data-column="Visible">
        <div class="switch">
          <label>
            <input type="checkbox" name="enabled_<?= $i; ?>" value="1" />
            <span class="lever"></span>
          </label>
        </div>
      </td>
      <!-- ici on regroupe -->
      <td class="action-icon">
        <span class='update_item'><img src="http://lorempixel.com/16/16" alt="modifier" class="img-update" /></span>
        <span class='delete_item'><img src="http://lorempixel.com/16/16" alt="supprimer" class="img-delete" /></span>
        <a href="view_item.php" target="_blank"><img src="http://lorempixel.com/16/16" alt="visualiser" class="img-view" /></a>
        <a href="custom_item.php" target="_blank"><img src="http://lorempixel.com/16/16" alt="configurer" class="img-setup" /></a>
      </td>
    </tr>

cela ne sera que plus facile à gérer lors du changement de largeur de ton écran, au passage tes « media queries » !!!beurk!!!

Il faut bien sûr aménager le CSS comme par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
/*-- OUT
.img-view, .img-update, .img-delete, .img-setup {
  width: 24px;
  height: 24px;
} OUT --*/
.action-icon img {
  width: 32px;
  height: 32px;
}

et bien évidement la « media querie » devra être reprise, ceci devrait suffire :

Code :

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
@media(max-width:767px) {
/*-- OUT 
  #item_rows .input-text {
    height: 1rem;
    font-size: 12px;
  }
  #table_items a, #table_items a img,
  #table_items span, #table_items span img {
    display: block;
  }
OUT --*/
  .action-icon {
    display: flex;
    padding: 5px 0px;
    border: 1px solid #888;     /* juste pour voir */
    background-color: #DDD;     /* juste pour voir */
  }
  .action-icon  > * {
    margin: auto;
  }
  .action-icon img {
    display: block;
    height: 64px;
    width: auto;
  } 
}

Attention je n'ai pas repris ci dessus ce qui concerne la <table> par elle même.