Bonjour,
Sur un formulaire j’ai un template d’affichage sur deux colonnes, mais quand j’affiche sur mon écran de portable (très petit), tout s’affiche en une colonne.
Sur grand écran
Sur petit écran
Pourtant il y aurait la place d’afficher les champs côte à côté, ici les utilisateurs doivent beaucoup scroller pour arriver aux onglets en bas.
Y a-t-il un endroit où je peux changer ce fonctionnement ?
Merci !
Emmanuelle
Bonjour,
Le mode responsive dépend des classes Bootstrap utilisées.
Dans le template, essayez avec la class extra-small de bootstrap, ça restera toujours en 2 colonnes :
<div class="row">
<div class="col-xs-6">...</div>
<div class="col-xs-6">...</div>
</div>
ou essayez avec sm, md, lg…
ou en forçant un style via media query sur vos tailles d’écran width:50% !important
BS V5
Merci François pour ces précisions.
J’utilisais col-md-6, j’ai tenté avec toutes les autres valeurs sans succès.
Ce qui est étrange c’est que quand j’inspecte je vois un “large” qui s’est ajouté à ma classe :
class=“col-xs-6 large”
Si en debuggant je le change à small ou medium mes colonnes se mettent bien côte à côte, mais avec large, elles se stackent 
Exact, j’avais oublié cette classe.
Simplicité ajoute la classe CSS .large si la largeur du div (et pas du screen) est inférieur à XS = 576px.
Cela corrige un problème non solutionnable par media-query : si on est sur un écran même très large, mais qu’une div (de row) dans un template devient trop petite (< xs, si on affiche le modeleur, treeview à gauche…), la classe “large” y est ajoutée pour forcer la largeur à 100% (du row).
On ne changera pas ce fonctionnement. Si vous avez des champs tout petits, il faudra le forcer par un style en dur comme :
<div class="row">
<div class="col-xs-7" style="width:60% !important; flex:0 0 60%; max-width:60%;">...</div>
<div class="col-xs-5" style="width:40% !important; flex:0 0 40%; max-width:40%;">...</div>
</div>
De plus en V5, il y a un mode compact au choix de l’utilisateur (ou en ajoutant la classe .compact à l’area) = le label est à gauche de l’input. Il devient très important d’avoir assez de place en largeur.
Et ça vous évitera d’avoir des formulaires sur 15m.
Merci, en forçant la valeur dans les balises ça ne se stacke plus effectivement.
This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.