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;
};