[Résolu] Répartir équitablement un nombre indéterminé d'items sur 2 li

Je ne comprends pas très bien ton problème, mais tu utilises des fonction "deprecate" et tu as une tonne d'erreurs (24 je crois).... désolé de ne pouvoir t'aider, mais corriges tes erreurs ça ira déjà mieux !
(clic droit sur ta page et choisi "inspecter"
Bon courage
Au cas ou essais ça

.media-extend-menu.active
  --mem: 7
  position: center
  bottom: auto
  right: 0
  
  //max-width: 18.5em
  align-content: end
  
  padding: .5em
  background-color: #222
  border-radius: 1.75em
  & button
    all: unset
    width: 2.5em
    height: 2.5em
    background-color: tomato
    border-radius: 50%

*
  box-sizing: border-box

body
  font-family: Arial
  color: #fff
  background-color: #333

.media-extend-menu
  text-align: center
  line-height: 2.5em

Modifié par Fox-infograp (29 May 2023 - 22:57)

Fox-infograp a écrit :
Je ne comprends pas très bien ton problème, mais tu utilises des fonction "deprecate" et tu as une tonne d'erreurs (24 je crois)

De quelles erreurs parle-t-on ?

Fox-infograp a écrit :
clic droit sur ta page et choisi "inspecter"

Effectivement... ça me rappelle vaguement quelque chose...

Pour le CSS, a priori ce n'est pas ça.
Merci pour les conseils.

Bonjour,

Je l'ai aussi fait en flex : CodePen (et même en float pour les tests).

D'ailleurs le menu était originellement codé en flex avant d'être passé en grid.

Le truc c'est que l'on ne connaît pas le nombre de boutons à l'avance. Le fait de mettre les boutons dans deux conteneurs séparés ne résoudra donc pas le problème.

Ola,

voila mon cailloux à l'édifice : https://jsfiddle.net/3tpczmk8/1/

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height:50px;
  width: fit-content;
  
}

.item {
  flex: 0 0 20px;
  width:20px;
  height:20px;
  background: pink;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
}

Bonne journée

@laurent : Ah oui, la distribution en colonne avec une hauteur max définie pour forcer à deux lignes max. J'y ai pensé mais ça oblige alors à une distribution verticale des items.

Bonjour,

Sans contrainte de dimensions sur le conteneur :

.media-extend-menu.active {
  position: absolute;
  bottom: 0;
  right: 0;
  display: grid;
  grid-gap: 0.5em;
  padding: 0.5em;
  background-color: #222;
  border-radius: 1.75em;
}
.media-extend-menu.active .item {
  width: 2.5em;
  height: 2.5em;
  background-color: #ff6347;
  border-radius: 50%;
}
* {
  box-sizing: border-box;
}
body {
  font-family: Arial;
  color: #fff;
  background-color: #333;
}
.media-extend-menu {
  text-align: center;
  line-height: 2.5em;
}
.media-extend-menu.active .item:nth-of-type(2n+1) {
	grid-row: 1;
}
.media-extend-menu.active .item:nth-of-type(2n) {
	grid-row: 2;
}

Certes, ça affiche toujours, comme avec la solution de _laurent les items pairs en dessous des items impairs au lieu de les afficher de gauche à droite.

Amicalement,

Ou plus simple une seule boite avec un max-width. Là il peut y avoir 17 boutons ou 52 sans problèmes. Sur button j'ai rajouté un margin-top.

.media-extend-menu.active
  --mem: 6
  position: absolute
  bottom: 0
  right: 0
  display: flex
  justify-content: space-between
  flex-wrap:wrap
  flex-direction: wrap
  flex-flow: wrap-reverse
  width:auto
  max-width:200px
  padding: .5em
  background-color: #222
  border-radius: 20px 20px 20px 20px
  & button
    all: unset
    width: 2.5em
    height: 2.5em
    margin-top: 7px
    background-color: tomato
    border-radius: 50%

Modifié par uniuc (30 May 2023 - 14:38)

Bonjour,

uniuc a écrit :
Ou plus simple une seule boite avec un max-width. Là il peut y avoir 17 boutons ou 52 sans problèmes.

Tu es sûr que y aura autant de boutons sur chaque ligne (tout en sachant qu'on ne sait pas combien il y a de boutons au départ) ?

J'ai quelques doutes !

Amicalement,

lol,

Non c'est certain on ne sais pas combien il y à de bouton... mais.

On sais déjà que de base il va y en avoir quatre ou plus, si je me base sur la photo on en est déjà à huit.

Je me dit que le nombre donc peut augmenter.

17 à 52 c'est excessif, c'est pour souligner qu'avec cette méthode il ne serras pas de limité, par rapport au nombre de boutons dont il va avoir besoin sur le lecteur.

L'idée dans ce que j'ai fait est surtout d'avoir des rangées de 4 bouton qui vont se placer les unes au dessus des autres, qu'il y ait 5 ou 8 boutons.

@uniuc le max-width est la solution de base que j'utilisais avant de faire le script. Comme je le disais dans mon premier message, je voulais éviter cette solution et passer à une répartition équitable des boutons pour que ça fasse plus propre.

@parsimonhi. Merci. Effectivement on reste en distribution verticale.

@gcyrillus. Bien vu, je n'avais pas pensé à :has(), c'est sans doute la solution pour l'avenir. C'est un sélecteur que j'utilise déjà par ailleurs avec mes grilles et que je profile déjà en JS pour Firefox. Remarque bien que la solution JS donnée au début fonctionne sans problème, mais je trouve agaçant de devoir surcharger mon code de base pour du code lié aux styles. Après je n'en mourrai pas.

D'un autre côté je peux aussi me dire "tant pis pour Firefox" à partir du moment où il lui reste une valeur de 6 boutons max par défaut et qu'il devrait prendre en charge cette fonctionnalité dans un avenir proche. Quoi qu'il en soit je pense que ta solution est top sur le plan CSS.

Édit : je m'attendais à ce que cette solution soit un peu verbeuse, mais au final pas tant que ça :

.media-extend-menu.active { /* code valable pour 5 boutons minimum */
  --mem: 6; /* nombre de colonnes par défaut */
  display: grid;
  grid-template-columns: repeat(var(--mem), 2.5em);
}
.media-extend-menu:has(button:nth-child(7):last-child, button:nth-child(8):last-child) {
  --mem: 4;
}
.media-extend-menu:has(button:nth-child(5):last-child, button:nth-child(9):last-child, button:nth-child(10):last-child) {
  --mem: 5;
}

Je pense que je vais l'adopter, sachant que les navigateurs ne prenant pas en charge :has() s'arrêterons toujours à 6 boutons max.

On peut aussi utiliser le JS comme solution de repli, avec un try/catch pour éviter de faire double emploi avec le CSS :

try { // Solution de repli pour ".media-extend-menu" si règle CSS :has() non supportée
  document.querySelector('body:has(*)')
  console.log('test OK')
} catch {
  console.log('Solution de repli JS pour ".media-extend-menu"')
  const extendMenu = player.querySelector('.media-extend-menu'),
        numberButtons = extendMenu.querySelectorAll('button').length
  let rows = numberButtons
  console.log(rows)
  if (numberButtons > 12) rows = 6
  else if (numberButtons > 6) rows = Math.ceil(numberButtons / 2) // Distribution des boutons sur 2 lignes de manière équitable.
  extendMenu.style.setProperty('--mem', rows)
}

Sujet résolu.
Modifié par Olivier C (01 Jun 2023 - 00:26)