24
Views
10
Comments
Solved
how to stick calendar control to input box

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

Rank: #286
Solution

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.

DatePicker1.oml

Rank: #286

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 :)

Rank: #20731

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?

Hi,


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

Rank: #20731

Yes I used the inbuilt widget only

Please check the OML

DatePicker1.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 : 

Rank: #2866

Hi,

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

DatePicker1.oml

Rank: #20731

Hi Diksha

thanks for your reply

still  it is not working

I used this widget. Forgot to mention in my post.

Rank: #286

Hi SP1312,

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 

Rank: #20731
Hi Shweta, Thanks for the reply We need to use the mentioned widget only. This is the requirement
Rank: #286
Solution

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.

DatePicker1.oml

Rank: #286

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 :)

Rank: #20731

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?