[RÉGLÉ] Plugin UP gestion des colonnes en responsive

[jps0302]

Bonjour

J'ai construit un tableau de 3 colonnes et j'aimerais que ces 3 colonnes soient affichées l'une derriere l'autre, lors d'un affichage sur smartphone en 320px.

J'ai utilisé le plugin Up de Monsieur LOMART, mais je n'arrive pas à mes fins.

Voici le contenu de mon appel de plugin : {up table-par-colonnes | breakpoint=600px | key-width=20% | style=width:100%;text-align:center}

Voici l'adresse de la page qui affiche le tableau :: http://www.cabeglais.fr/le-club/son-staff

Merci de votre aide

[pmleconte]

Bonjour,

Avez-vous essayé table-par-ligne https://up.lomart.fr/demo/action-table-by-rows ?

cela semble mieux correspondre à votre demande.

Pascal

[jps0302]

Merci de cette prompte réponse;

Je viens d'essayer le plugin up tables-par-lignes : {up table-par-lignes | breakpoint=600px | style=width:100%}

Mais le résultat n'est pas probant (voir PJ).

merci pour vos future pistes de recherche

[Eddy.vh]

Sur un smartphone, il sera difficile d'avoir un résultat agréable sur trois colonnes !
Je pense que le trois colonnes sur un ordinateur peut le faire, sur smartphone il sera très probablement préférable, pour le confort de lecture, de passer chacune des trois colonnes en une seule, l'une en dessous de l'autre.

[manu93fr]

Sur un smartphone, il sera difficile d'avoir un résultat agréable sur trois colonnes !
Je pense que le trois colonnes sur un ordinateur peut le faire, sur smartphone il sera très probablement préférable, pour le confort de lecture, de passer chacune des trois colonnes en une seule, l'une en dessous de l'autre.

Salut Eddy, je pense que c'est exactement ce qu'il cherche a faire
"J'ai construit un tableau de 3 colonnes et j'aimerais que ces 3 colonnes soient affichées l'une derriere l'autre, lors d'un affichage sur smartphone en 320px."

Maintenant, plutot qu'un tableau, il serait juste préférable de faire 3 div ou 3 modules vu la présentation que je vois ... pas besoin d'un plugin en plus

Et je rappelle qu'un tableau est là pour afficher des données structurés ...

[woluweb]

Ce qu'on peut faire aussi si le tableau est trop large mais qu'il doit rester sous forme de tableau classique, c'est comme sur

https://www.joomladay.fr/2019/programme

Sur la grille, on précise que pour les petits écrans on va "scroller" :

@media screen and (max-width: 1024px)
.schedule {
overflow-x: scroll;
scroll-snap-type: x proximity;
}

[pmleconte]

Bonjour,

Je viens de remarquer que le code généré sur votre page ne correspond pas à celui de la page de démonstration de Loïc.

Avez-vous bien activé le plugin UP ? quelle version du plugin UP utilisez-vous ?

Pascal

[Eddy.vh]

Salut Eddy, je pense que c'est exactement ce qu'il cherche a faire
"J'ai construit un tableau de 3 colonnes et j'aimerais que ces 3 colonnes soient affichées l'une derriere l'autre, lors d'un affichage sur smartphone en 320px."

Maintenant, plutot qu'un tableau, il serait juste préférable de faire 3 div ou 3 modules vu la présentation que je vois ... pas besoin d'un plugin en plus

Et je rappelle qu'un tableau est là pour afficher des données structurés ...

Aaaahhhhh, incompréhension dans ce cas. Pour moi, derrière signifie après sur une même ligne.
+1 pour l'abandon du tableau…

[pmleconte]

... pas besoin d'un plugin en plus

On ne parle pas d'un plugin, on parle du plugin qui peut (presque) tout faire.

Effectivement, j'ai moi-aussi laissé tomber les <table> au profit des flex http://up.lomart.fr/demo/action-flexauto, même si Joomla 4 préfère les CSS grid (https://www.joomla.fr/actualites/joo...st-en-approche et https://www.joomlashack.com/blog/joo...s-of-css-grid/)

Pascal

[pmleconte]

En complément, la page http://www.cabeglais.fr/le-club/son-staff a eu erreur au niveau du fonctionnement du plugin UP (propriété html non trouvée) ce qui explique pourquoi , lorsque vous modifiez la taille de votre écran, rien ne change.

Uncaught TypeError: Cannot read property 'html' of undefined
    at restables.min.js:8
    at Array.forEach (<anonymous>)
    at restables.min.js:8
    at Array.forEach (<anonymous>)
    at s.generateTable (restables.min.js:8)
    at s.init (restables.min.js:8)
    at new s (restables.min.js:8)
    at HTMLTableElement.<anonymous> (restables.min.js:8)
    at Function.each (c645e2e4427b7a1c2b4c56131d3c3291_0.js:3)
    at a.fn.init.each (c645e2e4427b7a1c2b4c56131d3c3291_0.js:3)

Pascal

[jps0302]

Bonjour,

Je viens de remarquer que le code généré sur votre page ne correspond pas à celui de la page de démonstration de Loïc.

Avez-vous bien activé le plugin UP ? quelle version du plugin UP utilisez-vous ?

Pascal

Bonjour

Oui, mon plugin est bien activé (cf PJ)

[manu93fr]

Bonjour

Oui, mon plugin est bien activé (cf PJ)

La dernière version du plugin date de Octobre 2018
Mais peu importe ... as tu bien lu les conseils que l'on te donne ?

[jps0302]

Bonjour

Je viens d'utiliser les flex et c'est parfait
merci à tous