Log in to AnswerLog in to Follow
UserImage.jpg
Kirk Sealls
14Views
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

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
11 days ago

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

@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

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
11 days ago
0
0
8 days ago

You are Welcome :)

Regard,

Kundan Chauhan

0
0
8 days ago
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.