Discussion :

[maxtrident]

bonjour
actuellement je fait ça pour changer mon display grid en block en fonction de la taille.

Code CSS :

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

1
2
3
4
5
6
7
#contentAu {
  display: grid;	
  grid-gap: 2px;
  grid-auto-flow: column;
  margin: auto;
  box-sizing: border-box;
}

Code :

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

1
2
3
4
5
6
7
8
 const carouselAu = document.getElementById("carouselAu"),
 contentAu = document.getElementById("contentAu"),
 nextAu = document.getElementById("nextAu"),
 prevAu = document.getElementById("prevAu");
 
   if (contentAu.scrollWidth == carouselAu.offsetWidth){
	 contentAu.style.display = "block"; 
   }

par contre si on fait a l'arrache avec le partage de 2 fenêtre windows ça ne fonctionne pas...je suis obliger de refresh la page pour que les valeur change.
il y a un moyen pour savoir la taille sans refresh ?

[SpaceFrog]

une piste ?
https://www.developpez.net/forums/d2...gueur-d-texte/

[maxtrident]

merci
j'avais trouver ça... je suis pas loin mais ça merde

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
27
28
29
30
31
32
33
function resizeWindow(oEvent) {
    contentAu.style.display = "grid";
    var newWidthcontau = contentAu.scrollWidth;
    var newWidthcarau = carouselAu.offsetWidth;
    var newWidth = window.innerWidth;
    console.log(newWidthcontau);
    console.log(newWidthcarau);
    if (window['oTailleOld'].width == null || window['oTailleOld'].width != newWidth) {
        if (newWidthcontau == newWidthcarau) {
            contentAu.style.display = "block";
            nextAu.style.display = "none";
        }
        else {
            contentAu.style.display = "grid";
            nextAu.style.display = "flex";
        }
    }
    window['oTailleOld'] = {
        widthcontau: newWidthcontau,
        widthcarau: newWidthcarau,
        width: newWidth
    };
}
//fct 
window['oTailleOld'] = {
    width: null,
    widthcontau: null,
    widthcarau: null
};
document.addEventListener('DOMContentLoaded', function() {
    window.addEventListener('resize', resizeWindow);
    resizeWindow();
});

par contre je comprend pas les newWidthcarau et newWidthcarau change bien en fonction de la fenêtre mais elles sont toujours égal.
si je refresh la page elle sont différent

EDIT : enfin trouvé... pour ce que ça intéresse il faut mettre en le contenu du div en display grid avant la lecture.

[Doksuri]

hellow, pourquoi ne pas passer par le getBoundingClientRect() (en JS) developer.mozilla.org/fr/docs/Web/API/Element/getBoundingClientRect
ou bien avec le @container query (en css) developer.mozilla.org/en-US/docs/Web/CSS/@container ?

[NoSmoking]

Bonjour,
il eut été bon de fournir la structure HTML pour ne pas avoir à patauger dans le vague !

Il existe également une solution tout à fait intéressante qui utilise l'API Resize Observer, cela permet d'alléger pas mal le code sur le resize.