Show / SimpleShowLayout Does not Render Fields When in a Grid

What you were expecting: When using material UI Grid in an Edit or Create page, the field contents displayed perfect. I expected the Grid to work the same way on a Show page.

What happened instead: When using the same Grid on a Show page, the fields did not display.

Steps to reproduce: Modify the demo/example https://marmelab.com/react-admin/Show.html#the-simpleshowlayout-component to include a Material UI Grid that wraps the fields.

Related code:

import Grid from '@material-ui/core/Grid';

export const PostShowx = (props) => (
    <Show {...props}>
        <SimpleShowLayout>
			<Grid container >
				<Grid item xs={6}>
					<TextField source="title" />
				</Grid>
				<Grid item xs={6}>
					<TextField source="name" />
				</Grid>
			</Grid>
            <RichTextField source="body" />
        </SimpleShowLayout>
    </Show>
);

Even a simple html table seems to not render the TextFields:

export const PostShow = (props) => (
    <Show {...props}>
        <SimpleShowLayout>
			<table>
				<tr>
					<td>
						<TextField source="title" />
					</td>
					<td>			
					       <TextField source="name" />
					</td>
				</tr>
			</table>
            <RichTextField source="body" />
        </SimpleShowLayout>
    </Show>
);

Note: It works just fine on an Edit page:

export const PostEdit = (props) => (
    <Edit title={<PostTitle />} {...props}>
        <SimpleForm>
            <DisabledInput source="id" />
			<Grid container >
				<Grid item xs={6}>
					<ReferenceInput label="User" source="userId" reference="users">
						<SelectInput optionText="name" />
					</ReferenceInput>
				</Grid>
				<Grid item xs={6}>
					<TextInput source="title" />
				</Grid>
			</Grid>
            <LongTextInput source="body" />
        </SimpleForm>
    </Edit>
);

Environment

• React-admin version: 2.2.0
• React version: 16.4.1
• Browser: Tried on both Firefox and Chrome

[heyimbrucelee]

Faced the same issue trying to use Grid. Simple workaround : use className 🎉

example : <DateField source="profile.birthdate" className="ra-field-50 " /> <TextField source="profile.firstname" className="ra-field-clear ra-field-50" /> <TextField source="profile.lastname" className="ra-field-50" />

.ra-field.ra-field-50{
    width: 50%;
    padding-right: 10px;
    float: left;
  }
.ra-field.ra-field-clear{
    clear:both;
  }

for input fields use formClassName <TextInput source="profile.lastname" formClassName="ra-field-50" />

implement it how you like, add media queries and so on…

[djhi]

Hence the Simple in its name and why we also provide the TabbedShowLayout and TabbedForm components. For other cases, you’ll have to implement your own layout/form