ImageField in WrapperField in SimpleShowLayout does not place images in row

[kav]

What you were expecting: Per https://marmelab.com/react-admin/WrapperField.html subfields should appear in a single row in a SImpleShowLayout. In the case of TextField this works correctly, in the case of ImageField it doesn't.

What happened instead: ImageFields appear vertically in a list rather than horizontally.

Steps to reproduce:

<SimpleShowLayout>
  <WrapperField label="Photos">
    <ImageField source="photo_0" />
    <ImageField source="photo_1" />
    <ImageField source="photo_2" />
    <ImageField source="photo_3" />
  </WrapperField>
</SimpleShowLayout>

Environment

• React-admin version: v4.1.5
• React version: v18.2.0
• Browser: Brave

[WiXSL]

Thanks for reporting this. Please provide a sample application showing the issue by forking the following CodeSandbox (https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple)

[WiXSL]

Looking at it again, I don't think this is a bug. ImageField component displays images in a div internally, so you should either manipulate the component with styles: https://marmelab.com/react-admin/ImageField.html#sx-css-api For example:

<ImageField
     source="pictures.0.url"
     sx={{ display: 'inline-flex' }}
  />

or use another component for your images inside the Wrapper