Tailwind CSS layout loses background - reactjs

Question

Using h-screen works until my datepicker comes up which expands the viewport
How do I make the background still fill (once a date box is hovered on it pops up the date picker)? The white space at the bottom of the date picker is the problem. I have a sidebar component for left-hand nav and a main content area.
Main content code:
.main-content {
#apply p-6 h-screen w-screen flex flex-col bg-slate-800 shadow-lg m-0 text-white;
}
Sidebar css:
.sidebar {
#apply h-screen w-20 flex flex-col bg-gray-900 shadow-lg m-0 px-3;
}
Datepicker code:
<div className="flex datepicker group-hover:scale-100 z-10">
<div className="grid grid-col-7 w-64 bg-gray-700 p-2 rounded-lg shadow-xl">
<div className="sub-text text-center">
{DateValue.monthLong} {DateValue.year}
<span
className="m-2 px-2 py-1 bg-gray-700 rounded-3xl hover:bg-gray-900 cursor-pointer"
onClick={(e) => changeMonth(e, false)}
>
<
</span>
<span
className="px-2 py-1 bg-gray-700 rounded-3xl hover:bg-gray-900 cursor-pointer"
onClick={(e) => changeMonth(e, true)}
>
>
</span>
</div>
<hr className="mb-2" />
<div className="grid grid-cols-7 pb-2">
<div className="text-center">Su</div>
<div className="text-center">Mo</div>
<div className="text-center">Tu</div>
<div className="text-center">We</div>
<div className="text-center">Th</div>
<div className="text-center">Fr</div>
<div className="text-center">Sa</div>
</div>
<div className="grid grid-cols-7">{daysAsInput()}</div>
</div>
</div>
CSS (Tailwind Apply)
.datepicker {
#apply absolute transition-all duration-100 scale-0;
}
.datepicker-day {
#apply m-1 bg-gray-700 rounded-lg shadow-lg
cursor-pointer items-center justify-center
p-1 text-sky-400 hover:bg-gray-900;
}
It scales to 100 when the input is hovered over.
Layout code:
<div className="flex">
<Sidebar />
<div className="main-content min-h-screen">{children}</div>
</div>
daysAsInput code:
const daysAsInput = () => {
// loop through the days in the month but start at the first day of the week
const inputs = [];
for (
let i = firstDayOfMonthAligned.day;
i <= firstDayOfMonthAligned.daysInMonth;
i++
) {
// create input that's grayed out if it's not in the current month
inputs.push(
<input
key={'previousMonth ' + i}
className="datepicker-day disabled:text-gray-400"
type="button"
value={i}
disabled={true}
onClick={dateChanged}
/>
);
}
for (let i = 1; i <= daysInMonth; i++) {
inputs.push(
<input
className="datepicker-day"
key={i}
type="button"
name="day {i}"
value={i}
onClick={dateChanged}
/>
);
}
return inputs;
};

Answer 1

The problem is caused by the fact that you position the datepicker absolute.
From the docs:
The element is removed from the normal document flow, and no space is
created for the element in the page layout.
You must take another approach, probably with z-index or javascript.

Answer 2

Try to change it to min-h-screen . That should do the magic

Answer 3

I think the problem is, we need to adjust the height styling of main-content class.
We can add "min-h-full" to the main-content class,
.main-content {
#apply p-6 h-screen w-screen flex flex-col bg-slate-800 shadow-lg m-0 text-white min-h-full;
}
This tailwind class will adjust the height of main-content to 100%. And the white background, have no room anymore.
Here was the reference of min-height
Thank you