Using Ant.Design Tabs https://ant.design/components/tabs/
How can I set styling on TabPane so that it's min-height is always 100% height of the window even when it's empty?
Below example should cover the window with color #F5F5F5
This has worked for me.
<TabPane tab={tab.title} key={index}>
<Row>
<Col style={{minHeight: "100vh", maxheight: "100vh"}}>
Test
</Col>
</Row>
</TabPane>
So this has worked for me too
<Tabs
onChange={() => {
console.log("oi");
}}
type="card"
style={{ background: "blue", height: "100%" }}
>
<TabPane
tab="Tab 1"
key="1"
style={{ minHeight: "100vh", background: "red" }}
>
Content of Tab Pane 1
</TabPane>
</Tabs>
Related
I am using MUI v5 AppBar to create a navigation bar with Tabs. When the Tabs are clicked, I want the background of the clicked Tab to blend with the background of the main page in the following manner:
The problem is the Tabs are rendered as buttons, and will only appear centered in the appBar when clicked. I can adjust the styling when clicked to increase the height but that will increase the height of the whole button and even the bottom section doesn't blend in with the background as desired as shown here:
Is there a way to increase the proportions of the buttons unevenly on the top and bottom to achieve this and how will I get the background of the button to blend seamlessly with the rest of the page without the visible shadow.
Here's a sample of my current code:
<Box
sx={{
textTransform: "none",
flexGrow: 1,
display: { xs: "none", md: "flex" },
}}
>
<Tabs
value={selectedTab}
onChange={handleChange}
TabIndicatorProps={{hidden: true}}
sx={{
"& button": { borderRadius: 1 },
"& button.Mui-selected": {
color: "black",
backgroundColor: "#e5e5e5",
height: 70,
},
}}
>
<Tab value="one" label="Invoice" />
<Tab value="two" label="Students" />
<Tab value="three" label="Reports" />
</Tabs>
</Box>
Any answer to either question is highly appreciated. Thank you.
Try this out:
<Box
sx={{
textTransform: "none",
backgroundColor: "#295fab",
flexGrow: 1,
padding: "0px 5px",
paddingTop: "16px",
display: { xs: "none", md: "flex" }
}}
>
<Tabs
value={value}
onChange={handleChange}
TabIndicatorProps={{ hidden: true }}
sx={{
"& button": {
borderTopLeftRadius: 6,
borderTopRightRadius: 6,
padding: "5px 25px",
paddingTop: "16px"
},
"& button.Mui-selected": {
color: "black",
backgroundColor: "#e5e5e5"
}
}}
>
<Tab value="one" label="Invoices" />
<Tab value="two" label="Students" />
<Tab value="three" label="Reports" />
</Tabs>
</Box>
I need to make a textfield with a responsive height so the height will always adjust itself to the size of the parent grid when the browser is minimized/maximized.
I looked up for a solution and I only found this:
Responsive MaterialUI TextField?
and it only gave me an idea about how to solve the same problem that I had with the width.
it didn't work with the height.
here is my code:
const useStyles = makeStyles({
infogrid: {
width: '30%',
height: '39%',
display: 'inline-block',
position: 'absolute',
right: '8%',
top: '10%',
backgroundColor: '#00ffff',
borderRadius: '5vh',
alignItems: 'center',
justifyContent: 'center',
justifyItems: 'center',
flexDirection: 'column',
overflow: 'auto'
},
label: {
margin: '25%',
marginTop: '0.3%',
marginBottom: '0.3%',
display: 'block',
height: '9%',
width: '50%',
}
})
export default function App() {
const classes = useStyles()
<Grid className={classes.infogrid}>
<TextField fullWidth className={classes.label} id="ovalID" label="1" variant="outlined" />
<TextField fullWidth className={classes.label} id="latitude" label="2" variant="outlined" />
<TextField fullWidth className={classes.label} id="longitude" label="3" variant="outlined" />
<TextField fullWidth className={classes.label} id="ovalRadius1" label="4" variant="outlined" />
<TextField fullWidth className={classes.label} id="ovalRadius2" label="5" variant="outlined" />
<TextField fullWidth className={classes.label} id="angel" label="6" variant="outlined" />
</Grid>
);
}
Just wrap everything inside your <Grid> with a <Stack> component.
Example
<Grid>
<Stack>
<TextField />
<TextField />
<TextField />
<TextField />
</Stack>
</Grid>
Should make your TextField height responsive in the grid items.
I just solved it by changing the parent grid into a div and changing the display setting of the div to 'flex'. Also, I set the marginTop and marginBottom settings in the 'labels' class to be a little bit higher.
As long as the parent div have the flex direction set to 'column'.
I need to fix a simple problem in the styling of my React App. I wonder why the CVC TextField in my react app doesn't align to the Card Number.
Pls check this codesandbox link
CLICK HERE
<div style={{ display: 'flex' }}>
<TextField
variant="outlined"
label="Expiration Month"
name="expiryMonth"
type="text"
value={values.expiryMonth}
onChange={handleChange}
onBlur={handleBlur}
helperText={touched.expiryMonth ? errors.expiryMonth : ''}
error={touched.expiryMonth && Boolean(errors.expiryMonth)}
fullWidth
className={classes.margin}
style={{ flex: 1 }}
/>
<TextField
variant="outlined"
label="Expiration Year"
name="expiryYear"
type="text"
value={values.expiryYear}
onChange={handleChange}
onBlur={handleBlur}
helperText={touched.expiryYear ? errors.expiryYear : ''}
error={touched.expiryYear && Boolean(errors.expiryYear)}
fullWidth
className={classes.margin}
style={{ flex: 1 }}
/>
<TextField
variant="outlined"
label="CVC"
name="cvc"
type="number"
value={values.cvc}
onChange={handleChange}
onBlur={handleBlur}
helperText={touched.cvc ? errors.cvc : ''}
error={touched.cvc && Boolean(errors.cvc)}
fullWidth
className={classes.margin}
style={{ flex: 1 }}
/>
</div>;
By default, each TextField has a margin of 8px due to which, the flex row of three text field(month, year and CVV) has 8 px gap with their children.
there are multiple fixes, the first one is
<div style={{ display: "flex", width="calc(100% + 16px)" }}>
This will force the row to take 16px more than 100% because we have 8px margin on TextField on both side so it will help us to overcome 8px margin on both side
another solution would be to add a negative margin of 16px on right side
<div style={{ display: "flex", margin: "-16px" }}>
I would recommend you to use Grid component from MUI because it will also help you to achieve responsive design, below is the code with Grid as a container, to make it responsive you will need to wrap each child component TextField in Grid item component
<Grid
style={{ display: "flex", margin: 0 }}
container
direction="row"
justify="center"
alignItems="center"
spacing={2}
>
Sand-box-project-1
Sand-box-project-2
I am using MUI with React and I have a <Paper> element which wraps a <Grid> with 3 children elements. When setting the overflowY property of the bottom grid item to "auto", when the content becomes too big, the scroll bar doesn't show up but it breaks the parent container. This is my code:
<Paper
elevation={0}
style={{
height: "776px",
width: 342,
overflowY: "hidden"
}}
>
<Grid
container={true}
direction="column"
style={{ overflowY: "hidden" }}
>
{
<Grid
container={true}
item={true}
style={{
flexGrow: 1,
padding: "16px",
width: "100%",
flexWrap: "nowrap",
position: "sticky",
top: 0
}}
>
{props.pageTitle && (
<Grid item={true} style={{ marginTop: 6 }}>
{!filterOpen && (
<Typography variant="h6">
<span
style={{
paddingLeft: 8
}}
>
{props.pageTitle}
</span>
</Typography>
)}
</Grid>
)}
{props.allowFilter && (
<Grid justify={"flex-end"} container={true} item={true}>
<FmsFilterBox
filterText={filterText}
onChange={setFilterText}
cssFilterBoxWidth="100%"
onFilterOpenChanged={setFilterOpen}
/>
</Grid>
)}
</Grid>
}
<Grid item={true} style={{ flexGrow: 1 }}>
<Divider style={{ width: "100%" }} />
</Grid>
<Grid
item={true}
style={{
flexGrow: 1,
overflowY: "auto"
}}
>
{props.children(filteredData)}
</Grid>
</Grid>
</Paper>
I tried everything but I can't get the scroll bar appear for the 3rd (bottom) grid item (the one rendering {props.children(filteredData)} which is a list with list items fetched from the back end).
If I remove the overflowY: "hidden" from the <Paper>, the content of the 3rd gets hidden, but still no scroll bar - please see the photos attached.
I am really out of ideas, did anyone have this issue before? Thank you.
Fixed it. Apparently I had to add a height of 100% to the upper most grid (main container) and a flex-wrap of "no-wrap".
Please see my React code example:
import { Row, Col, Icon } from 'antd';
const MyRow = () => (
<Row align="middle">
<Col md={10}>Trouble is a friend</Col>
<Col md={10}><Icon type="play-circle-o" /></Col>
<Col md={4}><div>Lenka</div></Col>
</Row>
);
...
When I rendered <MyRow />, I found that the text in <Row> was centered vertically well, but the <Icon> component didn't do so. So that my <MyRow> didn't look good. I expected all the content, not only the text but also the SVG in <Row> could be centered vertically.
I also tried other icon library, e.g. react-icons-kit, which did not work.
Does anyone have an idea?
Fortunately, I found some solutions to this small problem myself.
For icons in #ant-design/icons:
import { PlayCircleFilled } from '#ant-design/icons';
<Row align="middle">
<Col>
<PlayCircleFilled
style={{
verticalAlign: 'middle',
}}
/>
</Col>
</Row>
For icons in react-icons:
import { RiVolumeUpLine } from "react-icons/ri";
<Row align="middle">
<Col>
<RiVolumeUpLine
style={{
verticalAlign: 'middle',
}}
/>
</Col>
</Row>
For Icon in old antd:
<Row type="flex" align="middle">
<Col>
<div
style={{
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Icon
type="play-circle-o"
style={{
display: 'inline-block',
verticalAlign: 'middle',
}}
/>
</div>
</Col>
</Row>
For Icon in react-icons-kit:
import Icon from 'react-icons-kit';
import { ic_play_circle_outline } from 'react-icons-kit/md/ic_play_circle_outline';
...
<Row align="middle">
<Col>
<Icon icon={ic_play_circle_outline} style={{ verticalAlign: 'middle' }} />
</Col>
</Row>
This is not really antd specific, it's just about vertical centering in general.
I can recommend 6 Methods for Vertical Centering which discusses ways to do it on traditional CSS. The CSS Table method should work well in this case.
You also achieve it using Flexbox (<Row type="flex">), with align-items: center for the row.