Label position left of control

[Ofer-Gal]

In many cases, I need the label of the control to the left of the control rather than above.
I notice that for ChoiceGroup , styles={{ flexContainer: { display: "flex" } }} puts the radio horizontal
So I tried styles={{ root: { display: "flex" } }} but it does nothing, the Label
Even tried : styles={{ root: { display: "flex" }, flexContainer: { display: "flex" }, label: { flex: "1" } }}

No luck 😒

Anyone has the the magic CSS trick to do it for all fluentUI controls?

[sopranopillow]

Which component are you trying to modify? there's a chance that the root is not the container of the label + component

[Ofer-Gal]

This time it is ChoiceGroup. But in the past I needed this for others also.
I wish all controls would have a "labelPosition="top" property. like Spinner.
Thanks

[sopranopillow]

If you are interested, v9 does follow that idea, but I understand if migrating is not an option. That being said, one way to quickly know which classname in the styles you should use is by taking a look at the component's base implementation i.e. ChoiceGroup.base.tsx. Here's the render function for ChoiceGroup:

fluentui/packages/react/src/components/ChoiceGroup/ChoiceGroup.base.tsx

Line 159 in 167ccce

<div role="radiogroup" {...(ariaLabelledBy && { 'aria-labelledby': ariaLabelledBy })} onFocus={onRadioFocus}>

as you can see, there's a wrapper impeding the quick fix you showed from working. this will require some selectors in the styles, something like this:

const ChoiceGroupBasicExample: React.FunctionComponent = () => {
  return <ChoiceGroup
    styles={{
      root: {
        selectors: {
          '& > [role=radiogroup]': {
            display: 'flex',
          }
        }
      }
    }}
    defaultSelectedKey="B"
    options={options}
    onChange={_onChange}
    label="Pick one"
    required={true}
    />;
};

that way you can apply the flex style directly to the wrapper. If this was a different component there might have been another wrapper that did have something like className={classNames.<wrapperName>} as the attribute. In that case you could simply apply the styles directly in the styles like this:

style={{
  wrapperName: {
    // your styles
  }
}}

[Ofer-Gal]

Wow Works great. Thanks