Discussion :

[iluvthisgame]

Bonjour,

Voilà 15 ans que j'ai pas touché à de dev Web et j'avoue qu'avec toutes ces nouvelles solutions je suis plutôt perdu mais je m'adapte vite j'ai besoin d'un coup de pouce

J'ai commencé à dev une petite apppli web (PC ET mobile vu que sur mobile pas tout ne passe pour mon entreprise ou je dois afficher un planning (a partir d'une BDD SQL existante) donc pas réinventer la roue mais pas loin vu que le presta actuel est incapable de fournir une solution aux demandes actuelles.

Ce que je souhaite est plutôt simple dans ma tête mais de là a le mettre en place en CSS je suis perdu

Voici une image simpliste de ce que je veux :


Ce que souhaite :

En gros c'est un affichage planning (tableau de tâches des gens (nombre fluctuant suivant l'agence) suivant le jour de la semaine) avec si possible un affichage des tâches style "outlook" donc affichage des tâches sur plusieurs jours par dessus le tableau (en espérant que ce que j'exprime sois compréhensible mais ça j'imagine que ce sera dans un prochain temps le tout est d'avoir le bon layout dans un 1er temps)

- que la navbar soit fixe et prennent toujours la largeur de l'écran (je pense avoir compris en bootstrap comment faire un menu responsive et adapté sur mobile ou PC avec disparition du bouton et affichage du menu dans la navbar au dessus de 500px par ex)

- que la colonne de gauche soit toujours visible

- que le reste du tableau donc les colonnes de droite à partir de la 2eme soient de largeur fixes et en mode "iframe" (terme sorti d'outre tombe)

Donc en gros que la partie haute et gauche dans l'image ci dessus soient fixes et TOUJOURS visible, que le menu soit en mode collapse (donc que le reste partie de gauche et contenu de droite descende d'un cran) et que seule la partie data soit "déplaçable" en mode slide et que bien sur le tout fonctionne sur mobile !!!

J'ai lu, relu et surlu de nombreux tutos bootstrap mais j'avoue qu'il me faut une aide !

En espérant que ma demande soit claire

Bien à vous

iLtG

[darkstar123456]

Hello,

Voici un petit CodePen qui me semble correspondre à ce que tu as décrit
https://codepen.io/DarkStar123456/pen/JjNzBBE

Il est basé sur Bootstrap 5; qui utilise justement la même présentation dans sa documentation
Doc BS 5 : https://getbootstrap.com/docs/5.1/ge.../introduction/

[iluvthisgame]

Hello et merci de t'intéresser au pb.

Du coup je me doutais que je m'étais exprimé comme une poire alors je retente

En fait ce que je veux c que (dans ton ex la partie verte) la sidebar soit collée à gauche et en fixed

et que le contenu de droite (donc du coup le cadre rouge) soit en hauteur fixe et qu'il puisse scroller uniquement vers la droite car ce sera un tableau avec un nombre de personne défini par agence

D'où mon terme utilisé "iframe" car je veux que la navbar et la sidebar en gros ne bouge JAMAIS de place à l'écran mais qu'on puisse uniquement scroller à droite pour faire défiler un tableau a hauteur fixe (un peu comme un Excel auquel on aurait figer la premiere colonne et la 1er ligne (désolé lol je ne sais pas comment mieux l'exprimer)

Je m'en vais de ce pas retenter un autre schéma plus "parlant" au cas ou

[iluvthisgame]

Voilà donc je commente :

La Navbar (entournée de bleu) : hauteur fixe, ancrée en haut, largeur écran, responsive, avec menu en toggle en cas de largeur < 500px par ex

La sidebar (entourée de vert) : largeur fixe, ancrée à gauche, hauteur écran (enfin écran - hauteur navbar), responsive suivant hauteur écran

Le contenu (la partie rouge) : hauteur fixe, largeur fixe, HORIZONTALEMENT scrollable pour afficher X personnes suivant les agences

En espérant que je me sois mieux exprimé mais là j'avoue être à mon max

iLtG

[darkstar123456]

Hello,

J'ai réalisé un nouveau Codepen : https://codepen.io/DarkStar123456/pen/YzVMBRP

Comment ça se passe :
- on défini la première colonne en position: absolute;- on va lui donner une largeur (33.3vw vu qu'il y a 3 colonnes visibles dans l'exemple) histoire de pouvoir ensuite "déplacer" tous les contenus à droite de cette colonne
- on défini un wrapper (.table-wrapper), qui va faire 100vw de large. Soit width: 66.6vw + margin-left: 33.3vw afin de les déplacer à droite de la première colonne
- finalement, on force toutes les colonnes th et td à une width de 33.3vw

[iluvthisgame]

Hello,

Merci bien, je m'en vais regarder ça de plus près mais ça me parait être exactement ce qu'il me faut !!!

Je fais un retour en éditant ce message