3cn-ecn / nantralPlatform

Nantral Platform is a website project for clubs, events and more in Centrale Nantes
https://nantral-platform.fr
MIT License
20 stars 1 forks source link

[TICKET] Corriger le scroll dans les forms event et post #1094

Closed hydrielax closed 8 months ago

hydrielax commented 10 months ago

Description

Le scroll est cassé dans les modals avec un form : normalement, le header (titre de la modal) et le footer (boutons de validation) doivent toujours être accessibles.

Actuel Attendu
image image

Definition of done

The ticket can be considered as done if all theses criteria are completed:

Technical strategy

Le problème vient de la balise form qui est entre les balises ResponsiveDialog et ResponsiveDialogContent:

<ResponsiveDialog>
   <ResponsiveDialogHeader>...</ResponsiveDialogHeader>
   <form onSubmit={...}>
      <ResponsiveDialogContent>...</ResponsiveDialogContent>
      <ResponsiveDialogFooter>
         <button type="submit">
      </ResponsiveDialogFooter>
   </form>
</ResponsiveDialog>

Il faut remplacer la structure en déplaçant le form dans ResponsiveDialogContent, et en ajoutant une référence vers le form sur le bouton de validation pour le lier au form.

<ResponsiveDialog>
   <ResponsiveDialogHeader>...</ResponsiveDialogHeader>
   <ResponsiveDialogContent>
      <form onSubmit={...} id="id-du-form"> // id à modifier
         {...}
      </form>
   </ResponsiveDialogContent>
   <ResponsiveDialogFooter>
      <button type="submit" form="id-du-form">
   </ResponsiveDialogFooter>
</ResponsiveDialog>