Component Taking space instead of float above the other components when toggled - reactjs

Question

I want to add a date range component in my existing reactjs material ui project.But problem is its taking space instead of just showing it "above other components" just like the Select component
Here's the example snippet I want to add in my app https://codesandbox.io/s/materialui-daterange-picker-2p3f1?file=/src/App.js:274-385
My actual implementation
const Wow = () => (
<DateRangePicker
open={open}
toggle={toggle}
onChange={(range) => setDateRange(range)}
/>
);
const DateRange = () => (
<>
<Grid
container
spacing={1}
>
<Grid
item
lg={10}
md={12}
xl={9}
xs={12}
>
<Button
onClick={() => setOpen(true)}
>
Show
</Button>
<Wow />
</Grid>
<Grid
item
lg={2}
md={12}
xl={9}
xs={12}
>
<Button
variant="contained"
startIcon={<CheckIcon />}
onClick={handleSubmit}
>
Go
</Button>
</Grid>
</Grid>
</>
);
return (
<>
<Helmet>
<title>Selectors | Clever Clicks</title>
</Helmet>
<Box
sx={{
backgroundColor: 'background.default',
minHeight: '100%',
py: 3
}}
>
<Container maxWidth={false}>
<Grid
container
spacing={1}
>
<Grid
item
lg={4}
md={12}
xl={9}
xs={12}
>
<TextField
id="standard-select-currency-native"
select
label="Market"
onChange={handleMarket}
SelectProps={{
native: true,
}}
size="small"
fullWidth
helperText="Please select "
>
{marketplaces.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</TextField>
</Grid>
<Grid
item
lg={4}
md={12}
xl={9}
xs={12}
>
<TextField
id="standard-select-currency-native"
select
label="Products"
onChange={handleProduct}
SelectProps={{
native: true
}}
size="small"
fullWidth
helperText="Please select products"
inputProps={{ style: { fontSize: 15, overflow: 'visible' } }}
>
<option value="All"> --All-- </option>
{products.map((option) => (
<option key={option.id} value={`${option.title},${option.seller_sku},${option.id}`}>
{option.title}
</option>
))}
</TextField>
</Grid>
<Grid
item
lg={4}
md={12}
xl={9}
xs={12}
>
<DateRange />
</Grid>
</Grid>
</Container>
</Box>
</>
);
};
Its taking space when button is click to show
if you noticed, the below components are "forced" to stretch. What I want is to make the date range calendars "float".
Any help?

Answer 1

By default, the DateRangePicker component isn't going to have absolute position, which is what you need if you'd like to position the modal without taking up DOM space.
A generic example would be something like this:
.datePicker {
position: absolute;
top: 50px;
left: 50vw;
}
<DateRangePicker
className="datePicker"
open={open}
toggle={toggle}
onChange={(range) => setDateRange(range)}
/>
Using this after modifying the top and left properties to your needs may work if you combine it with a few media queries to compensate for different screen sizes.
However, if you want a more dynamic approach, you can take a look at this answer.
NOTE: Keep in mind that if the parent container is position relative, the absolute positioning will be relative to that element.