Hi,
When i scroll the page; my calendar control should stick to my input box
It should not look like above. Above is my current output. I tried to apply CSS to it. But not working.
App Type : Reactive web app
Hi SP1312,
I came up with resolution for same widget you want, Try to paste following css in your Home screen.
html, body, #reactContainer, #transitionContainer, .screen-container {
height: 100%;
display: inline;
overflow: auto;
}
Here, i also attached a working same OML you had shared.
Let me know, if it works.
If your screen has fixed header, then you also need to add following CSS with the above mentioned.
.fixed-header .header { /* position: fixed; */ left: 0; right: 0; top: 0; position: sticky; z-index: 200; }
Thanks and Happy Coding :)
Thank you Shweta
But during this research I don't understand how to apply customized jQuery and CSS ?
And can we use external jQuery file to apply some effect on this / any other widget?
The OS inbuilt calendar does not behave like this. Which component are you using for calendar? can you please post your OML for better info.
Regards,
Sanjay
Yes I used the inbuilt widget only
Please check the OML
I checked your OML. it looks issue with calendar widget. I'm trying to address this issue with CSS. Meanwhile you can either use just input widget as Diksha mentioned or you can enclose your input and calendar widget inside container and fix the height of that like below :
you can use default date type input instead of using a date control.
Also attaching the updated oml file.
Hope this helps you.
Thanks,
Diksha
Hi Diksha
thanks for your reply
still it is not working
I used this widget. Forgot to mention in my post.
First of all, your name is very strange ;)
Try not to use any widget to pick the date. Just set the variable of input of data type 'Date' and in the Input's property, Input Type should be also Date as below
This way, your input widget will appear on browser like below, and on clicking of icon , date picker will popup from where you can select desired date. On Scrolling, this date picker will hide, which is an ideal scenario and almost date picker works like this. And also i don't think you want to select date while scrolling ;)
Hope it helps, Thanks
not working for me this solution as it set the body fixed height and other elements in the screen cannot be displayed