We Keep Coding

Make elements on same line

I'm making a blog app using React, Material UI and Tailwindcss.
I made a grid of posts, but every postcard has a different height.
The question is: how to make all cards have the same height and all children in the same line?
Like This:
My Code:
Posts.jsx:
function Posts({ posts }) {
return (
<div className="mt-10">
<Container maxWidth="lg">
<Grid
container
rowSpacing={8}
columnSpacing={8}
direction="row"
justifyContent="center"
>
{posts.map((post, index) => (
<Grid key={index} item xs={12} sm={12} md={6} lg={4}>
<Card>
<CardActionArea>
<div className="flex flex-col ">
<CardHeader
avatar={
<Avatar>{post?.username?.substring(0, 1)}</Avatar>
}
title={post?.username}
subheader={"date"}
subheaderTypographyProps={{
color: "primary.dark",
}}
color="primary.main"
/>
<CardMedia
component="img"
height="194"
image={post?.photoURL}
/>
<CardContent>
<Typography variant="h6" color="primary.main">
{post.description}
</Typography>
</CardContent>
<Divider variant="middle" className="bg-[#fcfcfc]" />
<CardActions>
<IconButton>
<MdFavorite className="text-red-500" />
</IconButton>
</CardActions>
</div>
</CardActionArea>
</Card>
</Grid>
))}
</Grid>
</Container>
</div>
);
}
export default Posts;

You could try targeting the root <img> element directly by using the sx property. <CardMedia> would be updated like this:
...
<CardMedia
component="img"
height="194"
image={post?.photoURL}
sx={ {
['&.MuiCardMedia-root.MuiCardMedia-media.MuiCardMedia-img']: {
maxHeight: '194px'
}
} }
/>
...
As for making all children in the same line, you could:
set a maxHeight on the <CardHeader> and <CardContent> components, and
if you do not have control over the character length of the text in the header and content, use overflow: 'hidden', and textOverflow: 'ellipsis' to prevent long text strings from vertically expanding the <CardHeader> and <CardContent> components.

Try adding a fixed height on your tag. Also if the size of the images vary for each card it might cause a difference in the height of the whole card. If it doesn't work, try changing the height on your image to height: '194' to height: '194px'. Maybe this is what is causing an error.

Chakra UI, Tabs onChange method throws Maximum update depth exceeded on state change

I have the following code,
React throws Maximum update depth exceeded error, whenever I change the change the
index, It is somehow forming an infinite loop,
and the onChange method is being called on render, how can I fix it?
const ChecklistNavbarTabs = () => {
const [tabIndex, setTabIndex] = useState(0);
return (
<Tabs
variant='unstyled'
alignItems='center'
width='full'
bgColor='header.100'
height='full'
onChange={(index:number)=>{setTabIndex(index)}}
>
<TabList color='blackAlpha.600' justifyContent='space-between' m='3'>
<Flex
alignContent='space-between'
borderRadius='4'
justifyContent='space-between'
border='1px solid'
borderColor='blackAlpha.500'
>
<Flex justifyContent='space-between'>
<Flex>
<Tab
bgColor='gray.100'
borderColor='blackAlpha.500'
border='1px solid'
>
<Text>Header Fields</Text>
</Tab>
</Flex>
<Flex>
<Tab
bgColor='gray.100'
borderColor='blackAlpha.500'
border='1px solid'
>
<Text>Checkpoint</Text>
</Tab>
</Flex>
<Flex>
<Tab
bgColor='gray.100'
borderColor='blackAlpha.500'
border='1px solid'
>
<Text>Checklist Item</Text>
</Tab>
</Flex>
<Flex>
<Tab
bgColor='gray.100'
borderColor='blackAlpha.500'
border='1px solid'
>
<Text>Footer Field</Text>
</Tab>
</Flex>
</Flex>
</Flex>
<Flex justifyContent='flex-end' flex='1'>
<AddHeaderFieldButton />
</Flex>
</TabList>
<Flex>
<TabPanels>
<TabPanel>
<ChecklistHeaderFieldTable table={navbarData} />
</TabPanel>
<TabPanel>
<CreateCheckpointTable table={CreateCheckPointData} />
</TabPanel>
<TabPanel>
{/* <CreateChecklistItemTable table={AddChecklistItemData} /> */}
</TabPanel>
<TabPanel>
{/* <ChecklistFooterTable table={AddFooterTableData} /> */}
</TabPanel>
</TabPanels>
</Flex>
</Tabs>
);
};
export default ChecklistNavbarTabs;
I have tried, useMemo and useCallback as well, to memoize the results and stop re-render though I don't know if that the right way.
Please help me solve this error.

The documentation says the following:
You can render any element within Tabs, but TabList should only have Tab as children, and TabPanels should have TabPanel as children.
Tabs expects TabList and TabPanels as children. The order doesn't matter, you can have TabList at the top, at the bottom, or both.
I believe nesting Tab inside of multiple Flex components is the cause of the onChange infinite loop issue. Tab should be a direct child of TabList. You'd likely also need to remove <AddHeaderFieldButton /> or place it inside of a Tab component. Also TabPanels should not be wrapped in a Flex component.

The cause of the problem was that the tab panels had react-table tables as children, and there was an issue that I did not use useMemo while declaring table headers.
simply then fixed it via useMemo

Too long title slide the menu button to the right outside of the card

I have a problem with MuiCardHeader
<CardHeader
disableTypography
avatar={renderAvatar()}
action={
<IconButton onClick={toggleMenu}>
<img src={MoreIcon} alt=""/>
</IconButton>
}
title={
<Typography noWrap variant="subtitle1">
{data.name}
</Typography>
}
subheader={
<Typography variant="subtitle2" color="textSecondary">
{data.children.items.length} items
</Typography>
}
/>
For some reason too long title or subtitle slide the menu button to the right outside the card.
How can I prevent it?
Result I need
Here is code sandbox
https://codesandbox.io/s/dazzling-paper-5d35h?file=/src/App.js
UPD: Solution
Add the following code
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
to .MuiCardHeader-content class
Thanks to everyone for help!

You need to restrict the parent with text-overflow: ellipsis, overflow: hidden and white-space: nowrap
So in your case you just have to add .MuiTypography-noWrap to the parent .MuiCardHeader-content

Using Dividers inside Material-UI Tabs

If I want to use a Divider or something else that isn't a Tab inside Material-UI Tabs, I get DOM warnings in the console.
<Tabs ...>
//...
<Divider />
//...
</Tabs>
A workaround for this is to create a middleman-kind class like this:
<Tabs ...>
//...
<MDivider />
//...
</Tabs>
function MDivider(props) {
return <Divider />;
}
But I was thinking if this is the best solution to solve the issue or if there are other, better ways to stop getting the warning.
codesandbox with error here
codesandbox with fix here

Ok, so I think I found the best fix based on how the MUI Tabs are meant to be used. If Tabs are only meant to have MUI Tab children inside, then the MUI-intended way to do this would be to add the Divider like this:
<Tab label="" icon={<Divider />} disabled />
, give it a className and style it accordingly. The Tab component is a button with stuff inside, so you would need to override some paddings and min-heights in css.

you can use the Dividers in between each Tab as follows:
<Box
style={{
display: "flex",
justifyContent: "flex-end",
marginRight: 20,
}}
>
<Tabs
sx={{ backgroundColor: "#EAEBEF", borderRadius: 4 }}
value={tab}
onChange={(e, v) => setTab(v)}
>
<Tab label="Item One" />
<Divider
orientation="vertical"
style={{ height: 30, alignSelf: "center" }}
/>
<Tab label="Item Two" />
<Divider
orientation="vertical"
style={{ height: 30, alignSelf: "center" }}
/>
<Tab label="Item Three" />
</Tabs>
</Box>

Using CSS to add a border to the top of the tab seems to work well for me.
const useStyles = (theme) => ({
withDivider: {
borderTop: `1px solid ${theme.palette.divider}`,
},
});
<Tabs>
<Tab>...<Tab/>
<Tab>...<Tab/>
<Tab className={classes.withDivider}>...<Tab/>
<Tab>...<Tab/>
</Tabs>

Just for anyone wondering why the divider doesn´t show up, add the orientation property and set it to "vertical" so the divider can be visible in horizontal Tabs.
<Tab label="" icon={<Divider orientation="vertical" />} disabled />

Ensure space between Cards on colapse to small screen in react

Am trying to make sure that when I view my react website on a small screen my cards have space in between them. Right now when I view on a large screen the cards are spaced evenly, however, on a small screen, they are not spaces. Has anyone encountered that issue?
Here is my code
<Row gutter={16} justify="space-between" align="middle">
{this.state.news.slice(0,4).map((item, key) => (
<Col span={12} md={{span:6}} lg={{span:6}} style={{paddingTop:15,marginTop:10}}>
<Card
hoverable
style={{ width: 230 }}
cover={<img alt="example" src={item.imageurl} />}
actions={[
<a href={item.url} target="_blank" > Read News</a>,
]}>
<div style={{fontSize:10,paddingRight:5}}>
<Meta title={item.title} description={item.categories} />
</div>
</Card>
</Col>
))}
</Row>
cards on a big screen
cards on a small screen

You have style={{ width: 100 }},This will keep the width fixed for all screen. take it out and try.
<Card
hoverable
// style={{ width: 100 }}
cover={<img alt="example" src={i.picture.large} />}
actions={[
<a href='#' target="_blank" > Read News</a>,
]}>
</Card>