My primary objective is an edit form with two columns. I understand I can do this with a custom form, but I'm wondering if there's an easier way to do it using the existing SimpleForm or (better yet) TabbedForm.
I'm able to get the data to display in two columns using Grid or Box, but it's all crammed into a small column on the left side, instead of using the full width. I've tried playing with fullWidth, changing the component, etc. but I can't get it to work. Any help would be very much appreciated!
Updating with current code:
<SimpleForm >
<Grid container spacing={1}>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>Old</Typography>
<TextField source="id" />
<TextInput source="foo" fullWidth />
<TextInput source="bar" fullWidth />
</Grid>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>New</Typography>
<TextField source="id" fullWidth />
<TextInput source="newFoo" fullWidth />
<TextInput source="newBar" fullWidth />
</Grid>
</Grid>
</SimpleForm>
Try this add custom style to grid to take full width
<SimpleForm >
<Grid container spacing={1} style={{ width: "100%" }}>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>Old</Typography>
<TextField source="id" />
<TextInput source="foo" fullWidth />
<TextInput source="bar" fullWidth />
</Grid>
<Grid item xs={6}>
<Typography variant="h6" gutterBottom>New</Typography>
<TextField source="id" fullWidth />
<TextInput source="newFoo" fullWidth />
<TextInput source="newBar" fullWidth />
</Grid>
</Grid>
</SimpleForm>
Related
How can I make a modal warning user to save changes (in the Grid) before they leave site? Here is my example code (just an example!)
return (
<Grid container direction="column" alignItems="center">
<Grid item>
<TextField
fullWidth
variant="outlined"
label="First Name"
size="small"
value={fname}
onChange={e => handleChange(e.target.value, 'fname')}
/>
</Grid>
<Grid item>
<TextField
fullWidth
variant="outlined"
label="Last Name"
size="small"
value={lname}
onChange={e => handleChange(e.target.value, 'lname')}
/>
</Grid>
);
Trying to put one image and three label in a row with multiple columns just using flex layout and without nested flex layout, need some help.
<XF.FlexLayout direction="Column">
<XF.CollectionView itemsSource={Bind.oneWay(() => this.viewModel.list)}
itemsLayout="VerticalList">
<XF.CollectionView.itemTemplate>
<XF.FlexLayout {...XF.FlexLayout.grow(1)}>
<XF.Label margin="10, 10, 10, 10" text={Bind.twoWays((x) => x.data.name)}
fontAttributes="Bold" fontSize={18}/>
<XF.Label text={Bind.twoWays((x) => x.data.description)}
fontSize={16} />
<XF.Label text={Bind.twoWays((x) => x.data.price)}
fontSize={16} />
<XF.ImageButton margin="10, 10, 10, 10" widthRequest={80} heightRequest={120} {...XF.FlexLayout.basis(100)}
source={Bind.twoWays((x) => x.data.url)}
aspect="AspectFill"
{...XF.FlexLayout.order(-1)} />
<XF.Button {...XF.FlexLayout.basis(150)}
margin="10, 10, 10, 10"
heightRequest={50}
widthRequest={150}
text="Details"
borderRadius="6"
backgroundColor="#F26857"
borderColor="#F26857"
borderWidth={2}
textColor={Colors.white} />
</XF.FlexLayout>
</XF.CollectionView.itemTemplate>
</XF.CollectionView>
</XF.FlexLayout>
</XF.ContentPage>
You can use Grid to achieve it:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="1" />
<Label text="lbl1" Grid.Row="0" Grid.Column="2" />
<Label text="lbl2" Grid.Row="0" Grid.Column="3" />
<Label text="lbl3" Grid.Row="0" Grid.Column="4" />
</Grid>
I have created two tabs inside a Paper element, but instead of them being correctly aligned, the SCORE tab is too far to the right. Not sure why they are not auto adjusting the tab width to fit the width of the Paper element.
What am I doing wrong?
<Paper
className={classes.paperTagsSection}
>
<Box>
<Tabs
indicatorColor="primary"
textColor="primary"
>
<Tab label="Tags" />
<Tab label="Score" />
</Tabs>
</Box>
</Paper>
I found a solution. This worked:
<Tabs
indicatorColor="primary"
textColor="primary"
>
<Tab label="Tags" style={{ minWidth: '50%' }} />
<Tab label="Score" style={{ minWidth: '50%' }} />
</Tabs>
I'm trying to produce the following layout using the Material-UI grid... and have only managed so far to expose just how little I understand the whole thing.
What I'm looking to create is this:
Which I think equates to this design:
So my thinking was this structure...
<Grid container xs={12} spacing={3}>
<Grid item xs={12} >
<Paper className={classes.paper}>
Top Bar
</Paper>
</Grid>
<Grid container xs={12} spacing={3}>
<Grid container spacing={3}>
<Paper className={classes.paper}>
<Grid item xs={4}>
Main Field
</Grid>
<Grid container xs={8}>
<Grid container item xs={8}>
<Grid item xs={4}>
field 1 row 1
</Grid>
<Grid item xs={4}>
field 2 row 1
</Grid>
</Grid>
<Grid container item xs={8}>
<Grid item xs={4}>
field 1 row 2
</Grid>
<Grid item xs={4}>
field 2 row 2
</Grid>
</Grid>
<Grid container item xs={8}>
<Grid item xs={4}>
field 1 row 3
</Grid>
<Grid item xs={4}>
field 2 row 3
</Grid>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
</Grid>
</Grid>
... which was nothing like it. I can't get it to show at full width to start with.
I've tried adding width={1} props to various elements to no avail. Can some one point me in the right direction, or better yet is there some dev tool I'm missing for composing 'layouts' with Material-UI grid, or something similar?
I managed to create your layout by starting to use the Grid references on the complex grid section of the documentation.
By combining the row and column directions as props on the innermost Grids and putting inside the child Grids outer Paper components as placeholders, we could achieve what you are looking for.
The code would look something like this:
export default function ComplexGrid() {
return (
<div>
<Paper>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper>xs=12</Paper>
</Grid>
<Grid item xs={12} container>
<Grid item xs container direction="column" spacing={3}>
<Grid item xs={4}>
<Paper>xs=4</Paper>
</Grid>
<Grid item xs={8}>
<Paper>
<Grid item xs container direction="column" spacing={2}>
<Grid item xs={12}>
<Paper>
<Grid item xs container direction="row" spacing={1}>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
</Grid>
</Paper>
</Grid>
<Grid item xs={12}>
<Paper>
<Grid item xs container direction="row" spacing={1}>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
</Grid>
</Paper>
</Grid>
<Grid item xs={12}>
<Paper>
<Grid item xs container direction="row" spacing={1}>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
<Grid item xs={6}>
<Paper>xs=4</Paper>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
</Grid>
</Grid>
</Paper>
</div>
);
}
Here is a codesandbox with a working example of the code along with some not so good styles for the paper, but to serve only as a proof of concept. Then of course you can change the margins, paddings, sizes and anything else to your needs.
I have data source which, getting bind to grid in WPF. Data source is
array of students, with following fields
Name, Grade
Grid have 3 columns
Name, Grade, Settings
Settings column contains simple button for settings as below
<DataGridTemplateColumn Header="Settings" Width="75" CanUserResize="False">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Name="cSettings" Click="cSettings_Click" Style="{DynamicResource EditSettingsButton}" Width="50" >
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
Now, If grade is equal to one then only,Settings Button should get displayed.
Can I write condition in XAML itself ? i.e. Visibility of button should be on some condition ?
Tried below approach but not working
<DataTemplate>
<Button Name="cSettings" Click="cSettings_Click" Style="{DynamicResource EditSettingsButton}" Width="50" >
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding Grade}" Value="1">
<Setter Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Grade}" Value="2">
<Setter Property="Visibility" Value="Hidden"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button>
</DataTemplate>
Thanks
You could try using a converter instead. See this link