auto height is not working properly. long text contain is not properly shown #47553
Description
Steps to reproduce
Steps:
- Open this link to live example: (required)
Current behavior
long text contain is Hiding when we split a cell in a grid
Expected behavior
long text should not Hide when we split a cell in a grid. also should have same height with correspondence child cell also
Context
No response
Your environment
{
field: "url",
headerName: "URL",
flex: 1,
sortable: false,
align: "left",
renderCell: params => {
const urls = ensureArray(params.row.url);
return (
<>
{urls.map((u: string, i: number) => (
//
<Grid
item
key={i}
xs={12}
sx={{
// height: "100%",
// width: "100%",
// display: "Flex",
// alignItems: "center",
// overflow: "hidden",
// overflowWrap: "break-word",
// wordBreak: "break-all",
// padding: "5px !important",
display: "flex",
flexDirection: "column",
justifyContent: "flex-start" /* Keeps text at the top */,
height: "auto",
whiteSpace: "normal" /* Allows text to wrap to new lines */,
wordBreak:
"break-word" /* Ensures long words don't overflow horizontally */,
padding:
"8px 0" /* Recommended for 'auto' height visibility */,
borderBottom: "1px solid rgba(224, 224, 224, 1)",
backgroundColor:
urls.length > 1
? i % 2 === 0
? "white"
: "#f1fae6"
: "transparent",
// "&:hover": {
// backgroundColor: "rgba(0, 0, 0, 0.04)",
// },
}}>
{u}
</Grid>
// </Grid>
))}
</>
);
},
cellClassName: params => {
return "rowspancell";
},
},
{
field: "displayText",
headerName: "Display Text Link",
flex: 1,
sortable: false,
align: "left",
renderCell: params => {
const displayTexts = ensureArray(params.row.displayText);
return (
<>
{displayTexts.map((u: string, i: number) => (
// <Grid container >
<Grid
key={i}
item
xs={12}
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "flex-start" /* Keeps text at the top */,
height: "auto",
whiteSpace: "normal" /* Allows text to wrap to new lines */,
wordBreak:
"break-word" /* Ensures long words don't overflow horizontally */,
padding:
"8px 0" /* Recommended for 'auto' height visibility */,
// height: "100%",
// width: "100%",
// display: "flex",
// // minWidth: "0",
// // textOverflow: "ellipsis",
// // whiteSpace: "nowrap",
// padding: "5px !important",
// alignItems: "center",
// overflow: "hidden",
// overflowWrap: "break-word",
// wordBreak: "break-all",
borderBottom: "1px solid rgba(224, 224, 224, 1)",
backgroundColor:
displayTexts.length > 1
? i % 2 === 0
? "white"
: "#f1fae6"
: "transparent",
}}>
{u}
</Grid>
// </Grid>
))}
</>
);
},
cellClassName: params => {
return "rowspancell";
},
},
Search keywords: no