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>
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>
);
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>
I need to wrap the Tab components with a react-router Link compoenent. but considering the following code, when clicking on tabs yields no result. if it means the Tabs component must be direct parent of all Tab(s) component then how do I apply Link component?
<Tabs
value={tab}
onChange={(e, v) => setTab(v)}
>
<Link to={`${props.match.url}`}>
<Tab label="Content" />
</Link>
<Link to={`${props.match.url}/comment`}>
<Tab label="Comment" /
</Link>
<Link to={`${props.match.url}/create`}>
<Tab label="Create" />
</Link>
</Tabs>
you can provide Tab a component prop:
<Tabs
value={tab}
onChange={(e, v) => setTab(v)}
>
<Tab component={Link} to={`${props.match.url}`} label="Content" />
<Tab component={Link} to={`${props.match.url}/comment`} label="Comment" />
<Tab component={Link} to={`${props.match.url}/create`} label="Create" />
</Tabs>
I have an anchor panel wrapped in a Border panel (anchor panel positioned at the top ) .Anchor panel has a Menu bar to the top left and set of buttons aligned to the top right of the anchor panel. When is maximize the screen to full screen the buttons do not hold the position according to the increased screen size. I there a way to set the button co-ordinates relatively to the parent size ?
here is the code of the anchor panel.
<AnchorPane xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="application.views.MenuControls">
<children>
<MenuBar prefHeight="20.0" prefWidth="181.0">
<menus>
<Menu mnemonicParsing="false" text="First Menu">
<items>
<MenuItem fx:id="displayOne" mnemonicParsing="false"
onAction="#switchToOne" text="Display Anchor Pane One" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Second Menu">
<items>
<MenuItem fx:id="displayTwo" mnemonicParsing="false"
onAction="#switchToTwo" text="Display Anchor Pane Two" />
</items>
</Menu>
</menus>
</MenuBar>
<Button layoutX="590.0" mnemonicParsing="false" prefHeight="15.0" text="Close"
prefWidth="30.0" onAction="#closeApplication" managed="true" >
<!-- <graphic>
<ImageView fitHeight="17.0" fitWidth="17.0" layoutX="539.0"
layoutY="4.0">
<Image url="#close.png" />
</ImageView>
</graphic> -->
</Button>
<Button layoutX="560.0" mnemonicParsing="false" prefHeight="15.0"
prefWidth="30.0" onAction="#minimizeApplication" text="Min" managed="true">
<!-- <graphic>
<ImageView fitHeight="17.0" fitWidth="17.0" layoutX="577.0"
layoutY="4.0">
<Image url="#close.png" />
</ImageView>
</graphic> -->
</Button>
<Button layoutX="530.0" mnemonicParsing="false" prefHeight="15.0"
prefWidth="30.0" onAction="#maximizeApplication" text="Max" managed="true">
<!-- <graphic>
<ImageView fitHeight="15.0" fitWidth="17.0" >
<Image url="#close.png" />
</ImageView>
</graphic> -->
</Button>
</children>
</AnchorPane>
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