Skip to Content (Press Enter)
UserImage.jpg
Kirk Sealls
142Views
5Comments
Solved
Date picker calendar getting truncated
Question
Reactive
Application Type
Reactive
Service Studio Version
11.53.7 (Build 60881)

I've created a simple editable table, where one of the fields is a date picker; however, the problem I'm running into (per the screenshot below) is that the first several rows I add have their calendars truncated, since the application is docking the calendar at the bottom of the input field, and there's not enough space below the field to fit the calendar. The last couple of rows don't exhibit this problem, as they dock the calendar above the field.

I've attached the OML for reference.

Can anyone recommend a workaround for this problem?

Thanks!!!
Kirk



AddaHoliday.oml
0
0
18 Jul 2022
Copy Link
2026-03-12 06-20-48
KUNDAN CHAUHAN
Champion
Solution

Hi Kirk Sealls ,

As per your requirement  use this CSS , 

it work fine as your requirement :


html, body, #reactContainer, #transitionContainer, .screen-container 

{   

 height: 100%;   

 display: inline;    

overflow: auto;   

 z-index: 0;

}

.flatpickr-calendar.open

{    

display: inline-block;

z-index: auto;

}



Demo link :  https://personal-x1ixzlcz.outsystemscloud.com/AddaHoliday/ModifyHolidays?_ts=637948226212983187


I  updated your oml file ,please  check it also .

Let me know if It was helpful.


Thanks,

Kundan Chauhan


See solution in context
AddaHoliday_Updated.oml
0
0
30 Jul 2022
Copy Link
2023-10-21 19-42-11
Tousif Khan
Champion

Hello,

You can change the position of your date picker

there are lots of options available which you can customize by  AdvancedFormatJSON , A string with options such as: { disableWeekends: true, BeginEmpty: true } .

Check here - https://github.com/Pikaday/Pikaday
also check this post if it might help 

Thanks

0
0
18 Jul 2022
Copy Link
UserImage.jpg
Kirk Sealls

@Tousif Khan,

I don't see an "AdvancedFormatJSON" field, are you sure that isn't for the traditional web app version?

Thanks,Kirk

0
0
18 Jul 2022
Copy Link
2026-03-12 06-20-48
KUNDAN CHAUHAN
Champion
Solution

Hi Kirk Sealls ,

As per your requirement  use this CSS , 

it work fine as your requirement :


html, body, #reactContainer, #transitionContainer, .screen-container 

{   

 height: 100%;   

 display: inline;    

overflow: auto;   

 z-index: 0;

}

.flatpickr-calendar.open

{    

display: inline-block;

z-index: auto;

}



Demo link :  https://personal-x1ixzlcz.outsystemscloud.com/AddaHoliday/ModifyHolidays?_ts=637948226212983187


I  updated your oml file ,please  check it also .

Let me know if It was helpful.


Thanks,

Kundan Chauhan


AddaHoliday_Updated.oml
0
0
30 Jul 2022
Copy Link
UserImage.jpg
Kirk Sealls
0
0
02 Aug 2022
Copy Link
2026-03-12 06-20-48
KUNDAN CHAUHAN
Champion

You are Welcome :)

Regard,

Kundan Chauhan

0
0
02 Aug 2022
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.