keryanS
commented
1 month ago Bonjour,
Pour des raisons d'économie de poids, seuls les breakpoints : first sm md lg génèrent des classes utilitaires pour la grille.
Il est possible de rebuild le core en modifiant la variable grid.breakpoints du fichier src/core/variables.scss
Pour rebuild le css avec ce breakpoint en plus, il vous faudra suivre les indications du fichier contributing.md et télecharger le dsfr depuis github et non npm pour avoir les outils de build. Nous sommes conscient que ce n'est pas idéal, en v2 nous prévoirons un CLI pour définir ces variables à la création du projet.
Keryan, pour l'équipe du DSFR
Décrire le bug
Je souhaite déplacer un bouton html de 5 colonnes à droite, dans une div fr-col-12. J'utilise donc des attributs "fr-col-offset" qui fonctionnent, sauf le "fr-col-offset-xs-*".
Les étapes pour reproduire le bug
Dans un container de type div "fr-col", par exemple "fr-col-12", mettre un bouton html avec différentes classes "fr-col-offset", pour différentes tailles d'écran, donc "fr-col-offset-xs-5".
Comportement attendu
Pour les écrans de moins de 320px de large, on devrait voir ce bouton se décaler de 5 colonnes de la grille container, vers la droite. On suppose que le bouton, s'il fait une largeur d'une seule colonne de la grille container, devrait être centré horizontalement.
Configuration et système utilisé
Informations complémentaires
J'utilise l'inspecteur d'éléments, en simulation d'un iPhone, pour afficher un petit écran.