Augmenter la surface cliquable sur les icônes.

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

Et l'eau Thierry,

1. valide ton code html (il n'est pas valide)
2. une piste :

#table_items a, #table_items a img{display:block}

Bonjour Niuxe,

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

Suivant vos conseils, j'ai donc corrigé le code HTML.

J'ai également utilisé le display: block; sur les images du tableau pour les liens et j'ai voulu faire la même chose pour les images du tableau pour les span mais ça ne donne pas le même résultat.

Vous trouverez l'adaptation dans le codepen suivant :

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

Que faut-il faire sur les span pour quand puisse également augmenter la surface cliquable ? Faut-il transformer le span en un lien ?

Est-il possible de dire qu'on ne veut pas pouvoir cliquer sur toute la largeur du lien mais uniquement sur l'icône plus un petit espace de chaque côté du l'icône ?

Merci d'avance pour votre aide.

Bonne journée,
Thierry

En fait, j'avais pas fait attention. Ton code ne va pas du tout. Je t'ai corrigé ton code. À toi de faire le reste (css). Ton :before ==> oublie à tout jamais.

<table id="table_items">
        <?php for($i = 1; $i <= 4; $i++): ?>
        <tr>
            <th scope="row"><label for="label_<?= $i ?>">Libellé</label></th>
            <td><input type="text" class="input-text" placeholder="Libellé" name="label_<?= $i ?>" id="label_<?= $i ?>" value="" required /></td>
        </tr>
        <tr>
            <th scope="row"><label for="description_<?= $i ?>">Description</label></th>
            <td><input type="text" class="input-text" placeholder="Description" id="description_<?= $i ?>" name="description_<?= $i ?>" value="" required /></td>
        </tr>
        <tr>
            <th scope="row">Modifier</th>
            <td><span class='update_item'><img src="http://lorempixel.com/16/16" alt="modifier" class="img-update" /></span></td>
        </tr>
        <tr>
            <th scope="row">Supprimer</th>
            <td><span class='delete_item'><img src="http://lorempixel.com/16/16" alt="supprimer" class="img-delete" /></span></td>
        </tr>
        <tr>
            <th scope="row">Visualiser</th>
            <td><a href="view_item.php" target="_blank"><img src="http://lorempixel.com/16/16" alt="visualiser" class="img-view" /></a></td>
        </tr>
        <tr>
            <th scope="row">Configurer</th>
            <td><a href="custom_item.php" target="_blank"><img src="http://lorempixel.com/16/16" alt="configurer" class="img-setup" /></a></td>
        </tr>
        <?php endfor; ?>
    </table>

css

table {
          width: 100%;
          padding: 0 5px;
          margin: 0 auto;
          border-collapse: collapse;
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr {
          position: absolute;
          top: -9999px;
          left: -9999px;
        }

        /* Zebra striping */
        tr:nth-of-type(odd) {
        	background: #eee;
        }

        tr { border: 1px solid #ccc; }

        td {
          /* Behave like a "row" */
          border: none;
          border-bottom: 1px solid #eee;
          position: relative;
          padding-left: 35%;
        }
       /*beurk ! */
        /* td:before {
          position: absolute;
          top: 6px;
          left: 6px;
          width: 45%;
          padding-right: 10px;
          white-space: nowrap;
          content: attr(data-column);
          color: #000;
          font-weight: bold;
        } */

        td, th {
          font-size: 12px;
          padding-bottom: 2px;
          padding-top: 2px;
          border: 1px solid #ccc;
        	text-align: left;
        }

        th {
        	background: #3498db;
        	color: white;
        	font-weight: bold;
        }

        #item_rows .input-text
        {
          height: 1rem;
          font-size: 12px;
        }

        a {
          text-decoration: none;
          cursor: pointer;
          color: #fff;
        }

        #table_items a, #table_items a img{display:block}


        a:hover {
          opacity: 0.8;
        }

        .img-view, .img-update, .img-delete, .img-setup {
          width: 16px;
          height: 16px;
          margin-left: 16px;
        }

        .img-view:hover, .img-update:hover, .img-delete:hover, .img-setup:hover {
          cursor:	pointer;
        }

        #table_items a, #table_items a img, #table_items span, #table_items span img {
          display: block;
        }

Modifié par niuxe (29 Sep 2020 - 23:33)