how to order inputs horizontally within ArrayImput and SimpleFormIterator

Question

Is it possible to order inputs horizontally within ArrayImput and SimpleFormIterator? I know that the default is vertical. Thanks

See image of vertical inputs inside ArrayInputs here. Can the inputs be arranged horizontally? Thanks

Answer 1

Yes you can, the ArrayInput is made using material-ui which comes with its style way. For instance, you can play with elements root, form etc...

const useIteratorStyle = makeStyles(() => ({
  root: {
    display: 'flex',
    flexDirection: 'row',
  },
  form: {
    width: '100%',
  },
  line: {
    border: 0,
  },
}));

const iteratorClasses = useIteratorStyle();

<ArrayInput {...props}>
  <SimpleFormIterator classes={iteratorWithIndexClasses}>
  ...
  </SimpleFormIterator>
</ArrayInput>

Gives me something like

You can override each property of the useStyles object defined in the SimpleFormIterator: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/form/SimpleFormIterator.tsx

Answer 2

Inline prop has been introduced in version 4.3. It should work like that

<ArrayInput {...props}>
 <SimpleFormIterator inline>
 ...
 </SimpleFormIterator>
</ArrayInput>