Projet

Général

Profil

Development #46886

rendre scrollable les <table> si trop large

Ajouté par Thomas Jund il y a plus de 3 ans. Mis à jour il y a plus de 3 ans.

Statut:
Fermé
Priorité:
Normal
Assigné à:
Thomas Jund
Version cible:
-
Début:
22 septembre 2020
Echéance:
% réalisé:

0%

Temps estimé:
Patch proposed:
Oui
Planning:
Non

Description

Dans les cas où un tableau de donnée est plus large que son conteneur, il va déborder et la partie en débord ne sera pas accessible.

Je propose de rendre le tableau scrollable lorsqu'il déborde.
C'est ce qui se fait de plus simple (pas forcement le plus ergonomique) pour rendre un tableau responsive.

Fichiers

tableau-trop-large.png (15,2 ko) tableau-trop-large.png Thomas Jund, 22 septembre 2020 16:37
0001-css-add-horizontal-scroll-when-pk-data-table-is-too-.patch (806 octets) 0001-css-add-horizontal-scroll-when-pk-data-table-is-too-.patch Thomas Jund, 22 septembre 2020 16:52
tableau-avec-scroll-horizontal.png (26,4 ko) tableau-avec-scroll-horizontal.png Thomas Jund, 22 septembre 2020 16:53
0001-css-introduce-.pk-table-wrapper-table-wrapper-backgr.patch (2,4 ko) 0001-css-introduce-.pk-table-wrapper-table-wrapper-backgr.patch Thomas Jund, 25 septembre 2020 11:08
0001-css-introduce-.pk-table-wrapper-table-wrapper-backgr.patch (2,48 ko) 0001-css-introduce-.pk-table-wrapper-table-wrapper-backgr.patch Thomas Jund, 02 octobre 2020 11:47

Révisions associées

Révision a4298423 (diff)
Ajouté par Thomas Jund il y a plus de 3 ans

css: introduce .pk-table-wrapper & $table-wrapper-background (#46886)

  • add a x-axis scrollbar when table is too large
  • add a shadow scroll indicator

Révision 08f055d4 (diff)
Ajouté par Frédéric Péters il y a plus de 3 ans

misc: fix markup of pk-table-wrapper documentation (#46886)

Historique

#1

Mis à jour par Thomas Jund il y a plus de 3 ans

Ne pouvant ajouter une div wrapper autour des tableaux, j'ai forcé .pk-data-table en display:block.
Le navigateur va donc implicitement recréer une balise <table>.
Le seul défaut de cette méthode est qu'il ne sera pas possible d'utiliser un mode `table-layout: fixed;` sur ces tableaux (propriété non hérité).

#2

Mis à jour par Frédéric Péters il y a plus de 3 ans

Je n'ai pas l'URL de la page de la capture mais il me semble que nécessairement pour produire ça il y a eu passage par l'édition HTML et il pourrait y avoir comme information pour faire des tableaux responsives de les taper dans un div avec la bonne classe.

(si tu préfères)

À part ça, larger that → larger than.

#3

Mis à jour par Thomas Jund il y a plus de 3 ans

il pourrait y avoir comme information pour faire des tableaux responsives de les taper dans un div avec la bonne classe.

Je viens de me rendre compte que forcer un display block sur le tag table ne permettait pas non plus de forcer un width: 100% sur le tableau. J'avais dans l'idée d'essayer de trouver une solution pour rendre scrollable l'existant aussi. Mais je vais partir sur la balise englobante.

À part ça, larger that → larger than.

Merci.

#4

Mis à jour par Thomas Jund il y a plus de 3 ans

  • Statut changé de Solution proposée à En cours
#6

Mis à jour par Thomas Jund il y a plus de 3 ans

  • Assigné à mis à Thomas Jund
#7

Mis à jour par Serghei Mihai il y a plus de 3 ans

J'aime bien.

#8

Mis à jour par Serghei Mihai il y a plus de 3 ans

Sur le code: il faut une tabulation devant overflow: auto (au lieu de 2 espaces)

#9

Mis à jour par Thomas Jund il y a plus de 3 ans

  • espace -> tab
  • Remplacement du texte de la doc par une proposition de Fred
#10

Mis à jour par Serghei Mihai il y a plus de 3 ans

  • Statut changé de Solution proposée à Solution validée

Dans:
Attention cette classe ne s’applique pas à la balise <table> elle-même, elle doit se poser sur une balise <div> englobant le tableau. j'aurais mis ":" après Attention
ou juste se limiter à
Cette classe ne s’applique pas à la balise <table> elle-même, elle doit se poser sur une balise <div> englobant le tableau.

A toi de voir.

#11

Mis à jour par Thomas Jund il y a plus de 3 ans

  • Statut changé de Solution validée à Résolu (à déployer)

J'ai supprimé "Attention".

commit a42984237a55fd952bb004e9c45a8879f61ee790 (HEAD -> master, origin/master, origin/HEAD)
Author: Thomas JUND <tjund@entrouvert.com>
Date:   Tue Sep 22 16:40:11 2020 +0200

    css: introduce .pk-table-wrapper & $table-wrapper-background (#46886)
#12

Mis à jour par Frédéric Péters il y a plus de 3 ans

  • Statut changé de Résolu (à déployer) à En cours

Fail.

$ yelp-build html misc-css-classes.page misc-grid.page misc-scss.page
file:///home/fred/src/eo/publik-base-theme/help/fr/misc-css-classes.page:158: parser error : Opening and ending tag mismatch: div line 158 and p
e> elle-même, elle doit se poser sur une balise <div> englobant le tableau.</p>
                                                                               ^
file:///home/fred/src/eo/publik-base-theme/help/fr/misc-css-classes.page:158: parser error : Opening and ending tag mismatch: table line 158 and td
lle-même, elle doit se poser sur une balise <div> englobant le tableau.</p></td
                                                                               ^
file:///home/fred/src/eo/publik-base-theme/help/fr/misc-css-classes.page:159: parser error : Opening and ending tag mismatch: p line 158 and tr
    </tr>
         ^
file:///home/fred/src/eo/publik-base-theme/help/fr/misc-css-classes.page:160: parser error : Opening and ending tag mismatch: td line 158 and table
  </table>
          ^
file:///home/fred/src/eo/publik-base-theme/help/fr/misc-css-classes.page:161: parser error : Opening and ending tag mismatch: tr line 158 and section
</section>
          ^
file:///home/fred/src/eo/publik-base-theme/help/fr/misc-css-classes.page:163: parser error : Opening and ending tag mismatch: table line 158 and page
</page>
       ^
file:///home/fred/src/eo/publik-base-theme/help/fr/misc-css-classes.page:164: parser error : EndTag: '</' not found

^
file:///home/fred/src/eo/publik-base-theme/help/fr/misc-css-classes.page:158: parser error : Opening and ending tag mismatch: div line 158 and p
e> elle-même, elle doit se poser sur une balise <div> englobant le tableau.</p>
                                                                               ^
file:///home/fred/src/eo/publik-base-theme/help/fr/misc-css-classes.page:158: parser error : Opening and ending tag mismatch: table line 158 and td
lle-même, elle doit se poser sur une balise <div> englobant le tableau.</p></td
                                                                               ^
file:///home/fred/src/eo/publik-base-theme/help/fr/misc-css-classes.page:159: parser error : Opening and ending tag mismatch: p line 158 and tr
    </tr>
         ^
file:///home/fred/src/eo/publik-base-theme/help/fr/misc-css-classes.page:160: parser error : Opening and ending tag mismatch: td line 158 and table
  </table>
          ^
file:///home/fred/src/eo/publik-base-theme/help/fr/misc-css-classes.page:161: parser error : Opening and ending tag mismatch: tr line 158 and section
</section>
          ^
file:///home/fred/src/eo/publik-base-theme/help/fr/misc-css-classes.page:163: parser error : Opening and ending tag mismatch: table line 158 and page
</page>
       ^
file:///home/fred/src/eo/publik-base-theme/help/fr/misc-css-classes.page:164: parser error : EndTag: '</' not found

^
#13

Mis à jour par Frédéric Péters il y a plus de 3 ans

  • Statut changé de En cours à Résolu (à déployer)
commit 08f055d4526cd53859ed065b331584807181df66
Author: Frédéric Péters <fpeters@entrouvert.com>
Date:   Fri Oct 2 15:39:32 2020 +0200

    misc: fix markup of pk-table-wrapper documentation (#46886)
#14

Mis à jour par Thomas Jund il y a plus de 3 ans

Encode HTML entities. My bad.

#15

Mis à jour par Frédéric Péters il y a plus de 3 ans

  • Statut changé de Résolu (à déployer) à Solution déployée

Formats disponibles : Atom PDF