Dans ce tutoriel, nous allons explorer les raisons et méthodes pour supprimer les barres de défilement des Repeating Groups (ou de tout autre élément) dans Bubble.io.

Cela peut améliorer l'attrait visuel et l'expérience utilisateur de vos applications web.

Pourquoi enlever les barres de défilement des Repeating Groups dans Bubble.io ?

Les barres de défilement dans les Repeating Groups, bien que fonctionnelles, peuvent parfois nuire à la cohérence du design de votre application web. Les supprimer permet d'obtenir une interface plus épurée et fluide, particulièrement dans un contexte de design centré ou responsive mobile.

Comment supprimer les barres de défilement des Repeating Groups dans Bubble.io

Sur quel type d'éléments cela fonctionne-t-il ?

En résumé, cette méthode fonctionne sur à peu près tous les éléments où votre utilisateur peut faire défiler du contenu.

Pour l'exemple de ce tutoriel, j'utilise un élément Table, au lieu d'un Repeating Group.

Mais ne vous inquiétez pas, la méthode est exactement la même pour tous les types d'éléments.

Étape 1 : Activer l'attribut HTML ID de vos Repeating Groups

Pour que cette méthode fonctionne, il faut d'abord activer l’affichage des ID Attributes de vos éléments Bubble.

Pour ce faire, allez dans les Paramètres de votre application --> Onglet Général --> Et tout en bas de la page, cochez l'option intitulée "Afficher l’option pour ajouter un ID Attribute aux éléments HTML"

Une fois cette option activée, vous verrez ce nouveau champ apparaître dans le panneau de propriétés de tous vos éléments Bubble.

Étape 2 : Définissez l'ID Attribute de votre Repeating Group

Maintenant que l'option est activée, il suffit d'ajouter un ID au groupe que vous souhaitez cibler.

Notez que cette méthode fonctionne avec quasiment tous les éléments, pas seulement les Repeating Groups (par exemple, vous pouvez l’utiliser sur des Tables).

Attribuez à l'ID Attribute de votre élément la valeur "noscrollbar".

Évidemment, vous pouvez choisir n’importe quelle valeur pour cet ID, assurez-vous simplement de vous en souvenir pour l’étape suivante.

Étape 3 : Ajoutez du CSS personnalisé à votre application Bubble

Le code personnalisé pour cacher la barre de défilement de votre Repeating Group

Voici le code à coller dans votre application.

<style>
#noscrollbar::-webkit-scrollbar {
    display: flex;
    flex-flow: wrap;
}
</style>

En résumé, il supprime simplement la barre de défilement par défaut de l'élément ciblé.

IMPORTANT : Si vous avez choisi un ID différent à l’étape 2, pensez à remplacer #noscrollbar par #votreID.

Où coller ce code selon vos besoins ?

Maintenant que nous avons posé les bases, il ne reste plus qu'à ajouter ce code à votre application.

Deux options s’offrent à vous, selon votre cas d’usage :

1. Ajouter ce code dans l’en-tête de votre application Bubble

Cette méthode est à privilégier si vous souhaitez cacher les barres de défilement sur l’ensemble des pages de votre application.

Avec cette option, vous collez le code une seule fois, et il s’appliquera à tous les éléments ayant l’ID défini à l’étape 2, dans toute votre app.

Pour cela, rendez-vous dans les Paramètres de votre application --> SEO/Metatags --> Et collez le code dans la section "Script/Meta tags in Header"

2. Ajouter ce code dans l’en-tête de la page

Cette méthode est similaire à la précédente, mais elle ne s’applique qu’à la page spécifique où le code est collé.

Utile si vous souhaitez cacher la barre de défilement sur un élément présent uniquement sur une ou plusieurs pages spécifiques.

Ne pas insérer ce code dans l'en-tête global de l'application permet d’alléger les pages qui n'en ont pas besoin.

Pour cela, sélectionnez votre page dans l’arbre des éléments et collez le code dans le champ "Page HTML Header".

Conclusion

Et voilà !

Vous savez maintenant comment cacher la barre de défilement de n'importe quel élément dans votre application Bubble !

Supprimer les barres de défilement des Repeating Groups dans Bubble.io peut considérablement améliorer l’esthétique et l’expérience utilisateur de votre application.

En suivant ces étapes simples, vous obtiendrez un rendu plus épuré et professionnel pour votre application web, ce qui n’est jamais un mal.