How to force Office UI Fabric ChoiceGroup to align horizontal

Question

I am trying to build a SPFx webpart containing a ChoiceGroup. When I set the css style to ms-sm12 the choices are aligned vertical:

Show assigned to:
o anyone
* me
o nobody

I like them to align horizontal in one row:

Show assigned to: o anyone * me o nobody

When I set the style to ms-sm6, it aligns them "mixed": The Slider and Toggle are set to ms-sm3

Show assigned to: o anyone
* me
o nobody

With ms-sm4 it looks like:

With ms-sm3, ms-sm2, ms-sm1 it looks like (the title getting more and more squashed and all options in one column:

How can I force / encourage the options to be rendered horizontal?

Answer 1

Follow the steps given below :

1) Create New .scss file

ex: fabric.scss and paste this class in it.

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

2) In your component give refernece like:

  import  './fabric.scss';

3) Add component and apply class.

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

Answer 2

Another option that doesn't require adding a CSS is to apply the style directly to the control:

1. set the flexContainer style to display:flex.

2. you will notice a space might be needed at the end of the options, I added a non-breaking space as \u00A0

   <ChoiceGroup selectedKey={valueType}
   styles={{ flexContainer: { display: "flex" } }} options={[
   { key: 'specific', text: 'selected\u00A0\u00A0' },
   { key: 'relative', text: 'relative' }]} />
   

done!

Answer 3

1. add styles property to ChoiceGroup styles={{ flexContainer: { display: "flex" } }}
2. add styles property to options styles: { choiceFieldWrapper: { display: 'inline-block', margin: '0 0 0 10px' }}

done!