Discussion :

[boteha]

Bonjour,

Afin de créer un breaking point dynamique, je mesure la largeur de l'élément, la largeur de la fenêtre.

Quand la fenêtre est moins large que l’élément j'ajoute une classe supposée activer un paquet de déclarations CSS.

Ne fonctionne pas dans le codepen, voyez-vous l'erreur ?

Merci d'avance.

[mathieu]

avec votre code de test, je vois bien la différence de classe css quand la balise table est plus large que la fenêtre.

avant de chercher plus loin avec le code javascript, avez-vous déjà essayé de faire l'effet responsif en css ?
https://developer.mozilla.org/fr/doc..._media_queries

[boteha]

Bonjour,

OUI cela marche avec une media-query CSS.

Le problème est que la largeur du tableau varie selon le contenu et que je n'ai pas de valeur fixe pour le point de rupture.

Si je pouvais faire en CSS ce serait génial.

[NoSmoking]

Bonjour,

Si je pouvais faire en CSS ce serait génial.

pourquoi tant de haine ?


En l'état il ne va pas se passer grand chose ta <table> s'adaptant à son conteneur.

Il te faudrait mettre un écouteur sur la dimension de ta table pour basculer la classe a prendre en compte.

Quelque chose comme :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const objObserve = new ResizeObserver((entries) => {
  for (let entry of entries) {
    const elem = entry.target;
    const rect = entry.borderBoxSize[0];
    if( rect.inlineSize < 1500) {
      elem.classList.add("inf-1500");
    }
    else {
      elem.classList.remove("inf-1500");
    }
  }
});
const elemObserve = document.querySelector("table");
objObserve.observe(elemObserve);

... c'est un exemple bien sûr !

[boteha]

Bonjour NoSmokingr,

Merci de ton suivi.

1)

En l'état il ne va pas se passer grand chose ta <table> s'adaptant à son conteneur.

J'ai ajouté : table {white-space: nowrap}
Du coup la largeur de la table ne s'adapte plus à la largeur de la fenêtre, mais le script ne marche pas mieux.

2)
Merci de ton code mais je ne vois pas en quoi il diffère d'une media-query CSS (max-width: 1500px), j'ai sans doute mal compris.

Il me faut comparer 2 variables : la largeur de la fenêtre et celle du tableau.

[NoSmoking]

J'ai ajouté : table {white-space: nowrap}
Du coup la largeur de la table ne s'adapte plus à la largeur de la fenêtre, mais le script ne marche pas mieux.

Après observation plus attentive de ton code, le gros problème que j'entrevois est que lorsque ta <table> est plus large que la largeur de la fenêtre d'affichage tu modifies le CSS pour qu'elle s'adapte à la largeur de la fenêtre d'affichage.
Ce faisant elle n'est donc plus plus large, donc tu vas modifier le CSS pour qu'elle retrouve sa dimension originale.
Ce faisant elle devient plus largeur et dans ce cas on repart pour un tour !!!! ça va piquer les yeux

Je pense que ton approche n'est pas la bonne, si j'ai bien tout compris du but final, et que la solution sur base des médias queries me semble amplement justifiée, il te faut juste définir le bon break point.

[boteha]

Bonjour No-Smoking,

Je pense que ton approche n'est pas la bonne, si j'ai bien tout compris du but final, et que la solution sur base des médias queries me semble amplement justifiée, il te faut juste définir le bon break point.

D'accord mais la largeur dépend du contenu et le contenu est très variable.

Je ne vois pas comment éviter une mesure par JS.

Ne puis-je pas mesurer la largeur de la table et ensuite bloquer cette valeur comme une constante ?