Comment forcer Office UI Fabric ChoiceGroup à aligner horizontal

Question

J'essaye de construire un SPFx webpart contenant un ChoiceGroup. Quand je mets le style css pour ms-sm12 les choix sont alignés verticale:

Show assigned to: 
o anyone 
* me 
o nobody 

Je les aime à aligner horizontale sur une ligne:

Show assigned to: o anyone * me o nobody 

Quand je tournerai le style à ms-sm6, il les aligne " mixte ": Le curseur et bascule sont mis à ms-sm3

Show assigned to: o anyone 
* me 
o nobody 

Avec ms-sm4 il ressemble:

Avec ms-sm3, ms-sm2, ms-sm1 il ressemble à (le titre de plus en plus écrasé et toutes les options dans une colonne:

Comment puis-je forcer/enc ourage les options à rendre horizontales?

Answer 1

Suivez les étapes ci-dessous:

1) Créer un nouveau fichier de

ex: fabric.scss et coller cette classe en elle.

.inlineflex .ms-ChoiceField{ 
     display: inline-block; 
    } 

2) Dans votre composant sont refernece comme:

import './fabric.scss'; 

3) Ajouter un composant et appliquer la classe.

<ChoiceGroup 
       className="inlineflex" 
       label='Pick one icon' 
       options={ [ 
       { 
        key: 'day',       
        text: 'Day' 
       }, 
       { 
        key: 'week',       
        text: 'Week' 
       }, 
       { 
        key: 'month',       
        text: 'Month'      
       } 
       ] } 
      />