We Keep Coding

How to Keep Tab.Content below Nav in. React Bootstrap

I have a couple of React Bootstrap Tabs within a TabContainer as shown below. My issue now is that when I set the maxHeight of the Tab.Content and it gets exceeded, the content is going under the Nav which is weird.
Here is my code:
<Tab.Container
activeKey={activeTab}
onSelect={(e) => {
setActiveTab(e);
}}
>
<Row sm={1} className={'px-3'}>
<Nav variant="tabs" className="border-bottom-0 flex-row">
{
// ...tabsGoHere
}
</Nav>
</Row>
<Divider />
<Tab.Content
className='p-4'
style={{
maxHeight: 600, //This is causing the Tab content to display under the Tabs instead of below it, once the height exceeds 600.
overflowY: 'scroll',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<Tab.Pane eventKey={activeTab}>
{/* ...Content */}
</Tab.Pane>
</Tab.Content>
</Tab.Container>
How can I ensure the Tab.Content is always displaying below the Tabs and not under them no matter the height of the Tab.Content
Thank you

Skeleton-Avatar and ImageButton in MUI React are forced to oval background shapes

When using mui Stack I get weird side effect of geting all the background shapes of Skeleton Avatar and background area smeared to oval|elipsoid shapes. I tried setting equal width and height for Avatar but id does not help.
How can I fix it throguh sx mui component property or css?
code fragment
<Box
noValidate autoComplete="off"
sx={{ marginLeft: '15%','& .MuiTextField-root': { m: 2, width: '25ch' }}}>
<div>
<form onSubmit={onSubmit} >
{formFields.map((form, index) => {
return (
<Fade in={true} sx = {{width: '95%'}} {...{ timeout: 500 }}>
<Stack direction="row" borderRadius="0" spacing={2} key={index} style ={{marginLeft: '-50px', }}>
{form.img? <Avatar alt="release img" src={form.img} sx={{ width: 56, height: 56 }} /> : <Skeleton animation={false} variant ='circular'> <Avatar sx={{ width: 56, height: 56}} /> </Skeleton>}
<TextField {/* ... */}/>
<IconButton onClick={() => removeFields(index)}><DeleteIcon /</IconButton>
</Stack>
</Fade>
)
})}
</form>
<IconButton onClick={addFields} color={'warning'}> <AddCircleOutlineOutlinedIcon /></IconButton>
<br></br><br></br>
<Button onClick={onSubmit} color={'warning'} variant="contained" endIcon= {<SendIcon/>} > Search links </Button>

Normally, the default value of align-items for flex items will be stretch, that's why you see your icon is stretched in the cross axis
The solution is simple, set alignItems prop in Stack to a different value rather than normal/stretch. Here I use center
<Stack
direction="row"
borderRadius="0"
spacing={2}
alignItems="center" // this line
style={{ marginLeft: "-50px" }}
>
Demo
References
CSS align-items

Material-UI Masonry: Remove space on right side

Using Material-UI, the width of the Masonry Component doesn't fill the width of the parent container. The width of this missing space is exactly the width of the spacing, which makes sense if there's an element next to it.
I tried to calculate the width of the masonry to be the width of the Box element plus 8 * spacing, but this breaks as soon as there is a scrollbar involved.
How can I use the full width of the container for Masonry?
mwe (just an example from the documentation with a Box added on top):
const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
const Item = styled(Paper)(({ theme }) => ({
...theme.typography.body2,
color: theme.palette.text.secondary,
border: '1px solid black',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}));
<Container>
<Box style={{ border: '1px solid black', padding: '20px' }}>
<Typography variant="h5">
An Element to show the width of the contianer
</Typography>
</Box>
<Box style={{ marginTop: '20px' }}>
<Masonry columns={4} spacing={4}>
{heights.map((height, index) => (
<Item key={index} sx={{ height }}>
{index + 1}
</Item>
))}
</Masonry>
</Box>
</Container>
Screenshot of the MWE. Missing Area marked in red:

You can fix this by setting marginRight with the negation of your masonry spacing in the sx prop.
<Box sx={{ marginTop: '20px', marginRight: -4 }}>
{/* Masonry code */}
</Box>

I fix it simply by changing Masonry component width from "100%" to "auto",
I don't know why, but it works great.
<Masonry columns={4} spacing={4} sx={{ width: "auto" }}>
{* Masonry items *}
</Masonry>

card slide down in react spring not working

I am new to react and I am trying to slide down my div element using react-spring. However, the slide-down effect is not working. I saw this in a tutorial and tried to implement it however it's not working.
Here is my code:
<Spring from={{ opacity: 0, marginTop: -500 }} to={{ opacity: 1, marginTop: 0 }}>
{props => (
<div style={props}>
<div style={{ display: cost ? 'block' : 'none' }}>
<Card className="calculation shadow">
<CardBody>
<div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20
}}></div>
<Row style={{ float: 'right', marginBottom: '1rem' }}>
<span style={{ float: 'right' }}>
<FontAwesomeIcon icon={faClipboardList} onClick={this.handler} />
</span>
</Row>
<div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20
}}></div>
</CardBody>
</Card>
</div>
</div>
)}
</Spring>
How do I make it work so that the div component slides down when clicking a button? Please help

You're not passing the animated styles to an animated.div. Which means the props from the spring will not animate your component.
Also since you're trigger the animation on a click. I would set the animated values – opacity & marginTop as state variables. Then you on the onClick handler you can update the state triggering a change in the animation.
See the Spring docs here
And for more information, here's a codesandbox

I found the solution everything is fine no animated div required I had to just change the version of react- spring to npm i react-spring#8.0.20 and it works

Vertically center text inside grid element

I need to vertically center text inside grid item, which has minHeigh attribute set, here's short codesandbox example of the problem i'm facing, justify, alignItems, does not seem to be working.
<Grid container className={classes.root}>
<Grid item xs={12}>
<Grid
container
spacing={16}
className={classes.demo}
alignItems={alignItems}
direction={direction}
justify={justify}
>
{[0, 1, 2].map(value => (
<Grid
key={value}
item
style={{
padding: "0 12px",
minHeight: 48,
borderStyle: "solid"
}}
>
{`Cell ${value + 2}`}
</Grid>
))}
</Grid>
</Grid>
When style={{ minHeight: 48 }} is applied to <Grid item /> children of grid item is not being aligned, justify, alignItems, does not have any effect on it.

You need to add two other properties to the element as well.
display: inline-flex;
align-items: center;
If this is the result that you are expecting
<Grid
container
spacing={16}
className={classes.demo}
alignItems={alignItems}
direction={direction}
justify={justify}
>
{[0, 1, 2].map(value => (
<Grid
key={value}
item
style={{
display: "inline-flex", // <--
alignItems: "center", // <--
padding: "0 12px",
minHeight: 48,
borderStyle: "solid"
}}
>
<p>{`Cell ${value + 2}`}</p>
</Grid>
))}
</Grid>

Try vertical-align: middle, and see if that works? Or if the box is a fixed height you could always add margin to the top of it. Hope that helps!

here is how you can do it. Wrap your text inside div and use alignItems:
https://codesandbox.io/s/8nw8v9yv02