How to force Office UI Fabric ChoiceGroup to align horizontal

user_818454 0
Viewed 7218

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

Mixed

With ms-sm4 it looks like:

ms-sm4

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

enter image description here

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

spfx office-js typescript css
4 Answers

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!

user_21679280
  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!

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