When I open the ' created Start Date' date picker, the calendar opens below the input, but half of it is hidden behind the footer. How can I fix this?
check here
Attached oml
Hi @Siva S ,
Check this solved discussion:
https://www.outsystems.com/forums/discussion/80033/date-picker-calendar-getting-truncated/
Thanks,
Dhanasingh Dennison.
Hi @Dhanasingh Dennison ,
html, body, #reactContainer, #transitionContainer, .screen-container
{ height: 100%; display: inline; overflow: auto; z-index: 0;}
.flatpickr-calendar.open
{ display: inline-block;z-index: auto;}
I already tried this CSS code, but it doesn't work on the block or Popup — it only works on the screen
hi @Siva S
You can check this css and check
.flatpickr-today-button {display: none !important;}
.flatpickr-months {padding: 5px !important;}
.flatpickr-innerContainer { padding: 5px !important;}
.flatpickr-weekdays { padding-bottom: 5px !important; height: 18px !important;}
.flatpickr-day { height: 35px !important; line-height: 35px !important; max-width: 39px !important;}
.flatpickr-calendar { width: 300px !important;}
.flatpickr-months{ padding: 5px !important; height: 31px; padding-left: 5px !important;}
.flatpickr-weekdays{ padding-bottom: 2px !important;}
.flatpickr-calendar.hasTime .flatpickr-time{ display: none !important;}
I hope this helps for you.
Thanks
Hi @Rupesh Patil
The code is working on both the block and the popup.
However, I have a block that scrolls to open the date picker. When I open the date picker and then scroll the block, the calendar stays fixed in its initial position and scrolls along with the block.
How can I fix this issue so that the date picker stays attached to the input field while scrolling?
click her to check
Hi Siva, Try adding this CSS: body:has(.flatpickr-calendar.open.inside-popup) .popup-content > div:first-child { overflow: hidden !important;}This will prevent scrolling when the date picker is open.
Hi @Faais
When I open the date picker, scrolling is disabled. But when I click outside the calendar, scrolling is enabled again — and there's a flickering issue.
As per the client’s requirement, the calendar should move along (scroll) when the user scrolls up or down. How can I achieve this?
Hi,
Because you are using 2 columns, it will create an issue. Can you please try with a single column?