MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: rendre le footer du Drawer hors zone scrollable (épinglé en bas)

Browse Source 
Le slot #footer était rendu à l'intérieur du body overflow-y-auto, ce qui
faisait courir la scrollbar sur toute la hauteur, derrière le footer. Il est
désormais frère du body (comme MalioModal) : seul le body défile et le footer
reste fixé en bas. Tests, story, pages playground et doc alignés.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Autin
2026-05-27 14:50:55 +02:00
parent 951acd448e
commit 280b650e49
7 changed files with 32 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.playground/pages/composant/drawer/drawer.vue
+9 -14
View File
@@ -33,7 +33,7 @@ const drawerNoDismiss = ref(false)
</div>
<div class="rounded-lg border p-6">
<h2 class="mb-6 text-xl font-bold">Avec footer collant</h2>
<h2 class="mb-6 text-xl font-bold">Avec footer d'actions</h2>
<MalioButton label="Ouvrir le formulaire" variant="tertiary" @click="drawerForm = true" />
<MalioDrawer v-model="drawerForm" drawer-class="max-w-lg">
<template #header>
@@ -45,32 +45,27 @@ const drawerNoDismiss = ref(false)
<MalioInputText label="Email" />
</div>
<template #footer>
<div class="sticky bottom-0 flex gap-3 bg-white py-4">
<MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="drawerForm = false" />
<MalioButton label="Enregistrer" button-class="flex-1" @click="drawerForm = false" />
</div>
<MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="drawerForm = false" />
<MalioButton label="Enregistrer" button-class="flex-1" @click="drawerForm = false" />
</template>
</MalioDrawer>
</div>
<div class="rounded-lg border p-6">
<h2 class="mb-6 text-xl font-bold">Avec footer fixed bottom</h2>
<MalioButton label="Ouvrir (footer fixe)" variant="tertiary" @click="drawerFixedFooter = true" />
<h2 class="mb-6 text-xl font-bold">Footer fixe avec contenu long</h2>
<MalioButton label="Ouvrir (contenu long)" variant="tertiary" @click="drawerFixedFooter = true" />
<MalioDrawer v-model="drawerFixedFooter">
<template #header>
<h2 class="text-[24px] font-bold text-black">Conditions</h2>
</template>
<!-- pb-24 : laisse la place au footer fixe qui sort du flux et recouvrirait le bas du contenu -->
<div class="flex flex-col gap-4 pb-24">
<!-- Pas de hack : le footer est hors zone scrollable, seul le body défile -->
<div class="flex flex-col gap-4">
<p v-for="n in 12" :key="n" class="text-m-text">
Paragraphe {{ n }} — contenu long pour forcer le scroll et montrer que le footer reste fixé en bas du viewport.
Paragraphe {{ n }} — contenu long pour forcer le scroll et montrer que seul le body défile, le footer restant fixé en bas.
</p>
</div>
<template #footer>
<!-- fixed : positionné par rapport au viewport ; w-full max-w-md cale la largeur sur le drawer droite par défaut -->
<div class="fixed bottom-0 right-0 w-full max-w-md border-t border-m-border bg-white px-5 py-4">
<MalioButton label="Accepter" button-class="w-full" @click="drawerFixedFooter = false" />
</div>
<MalioButton label="Accepter" button-class="w-full" @click="drawerFixedFooter = false" />
</template>
</MalioDrawer>
</div>