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?

score 6 · Accepted Answer · answered Aug 02 '17 at 11:57

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'                       
                }
                ] }
             />

Thanks that worked, I just had to prefix `.ms-ChoiceField` with `:global`. My css looks now like `.inlineflex { :global .ms-ChoiceField { display: inline-block; } }` — Dennis Kuhn, Aug 02 '17 at 18:03
I am facing the same issue but this solution is not working for me. — Keerthi Kumar, Feb 20 '19 at 05:48

score 3 · Answer 2 · answered Apr 02 '19 at 18:28

3

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

set the flexContainer style to display:flex.

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!

answered Apr 02 '19 at 18:28

Shai Petel

188
11

1

I use this and only the choices are inline. the label is on a line on top. how can I force the label to be in the same line. – Ofer Gal Dec 30 '19 at 23:38
Repeating the comment above for emphasis. The label is still on another line. – Kirk Liemohn Nov 02 '21 at 17:30

score 2 · Answer 3 · answered Feb 19 '20 at 14:49

2

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

done!

answered Feb 19 '20 at 14:49

von Brausen

33
1
5

sorry, but how to style the options margin on the options attr? – Eiglimar Junior Jun 20 '22 at 18:16
1

IChoiceGroupOption interface have property styles, so you could set it like styles={{ choiceFieldWrapper: { display: 'inline-block', margin: '0 0 0 10px' } }} (depends on the use case) for each option. Just use F12 for TS to check which objects has styles inside. – von Brausen Jun 22 '22 at 09:47

score 1 · Answer 4 · answered Feb 26 '20 at 13:21

1

const options: IChoiceGroupOption[] = [
      { key: 'conforme', text: 'Conforme'},
      { key: 'noConforme', text: 'No conforme', styles:{field: { marginLeft: "15px"}}}
    ];
<ChoiceGroup styles={{ flexContainer: { display: "flex" } }}  options={options}  />

answered Feb 26 '20 at 13:21

Alberto Gutierrez perez

11
1

4

please consider writing a few sentences about your code so others can learn from it. Only code answers are considered as low quality. – mischva11 Feb 26 '20 at 13:44
While this code snippet may be the solution, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-‌code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – colidyre Feb 27 '20 at 00:32

How to force Office UI Fabric ChoiceGroup to align horizontal

4 Answers4