This is a migrated thread and some comments may be shown as answers.

Calendar Display during Scrolling

3 Answers 322 Views
DatePicker
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Andy asked on 11 May 2018, 03:28 PM
Our users have notices that when the page is scrolled with the date picker control open and calendar is showing, that the calendar does not move with the date textbox as the page is scrolled.  Is there any way to have the dropdown calendar also move when page is scrolled.

3 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 16 May 2018, 12:20 PM
Hi Andy,

We are aware of similar behavior related to the positioning of the RadDаtePicker parent elements. Can you ,please, try setting "position:relative" style to the RadDatePicker element or/ands its wrapper and see if he problem persists?
.wrappingElementClass {
    position: relative;
}


If this does not help to resolve the issue, please, send us a sample page where we can reproduce the issue and examine the exact configuration that is leading to it.


Regards,
Vessy
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Andy
Top achievements
Rank 1
answered on 17 May 2018, 04:02 PM

Could you provide more detailed instructions.  I do not know where to add this style.  We are using one of the provided skins and I don't see this element in any of the css files.

Thanks.

0
Vessy
Telerik team
answered on 18 May 2018, 06:15 AM
Hi Andy,

Please, excuse me for not being clear enough in my previous reply. This is not an actual class name, you should replace it with the existing class of a DatePicker's wrapper from your actual page. If you want you can send me a runnable page reproducing the problem, so I can examine the exact layout that you use and advise you on the element you have to style.

On a side note For example, if you have a div wrapping the DatePicker you can try styling it like suggested:
<div class="replaceThisClassWithActualOne">
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server"></telerik:RadDatePicker>
</div>
<style>
    .replaceThisClassWithActualOne {
        position: relative;
    }
</style>



If this does not help, though, please, send us your setup, so we can examine the layout leading to the problem further and advise you on how to fix it.


Regards,
Vessy
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Roger
Top achievements
Rank 2
Iron
Iron
Iron
commented on 08 Sep 2022, 09:13 PM

Has this been resolved?  I am having this exact same issue, and have tried the Position:relative.
Doncho
Telerik team
commented on 13 Sep 2022, 11:21 AM

Hi Roger,

So far we haven't validated any bug or a similar unexpected behavior caused by the control itself.

In order to help, we would need to have a reproduction of the problem so we can troubleshoot it locally.

It would be very helpful if you share a sample or code snippets and reproduction steps that would help us experience the problematic behavior.

Does the same problem appear in different browsers - Chrome, Firefox, Edge?

Tags
DatePicker
Asked by
Andy
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Andy
Top achievements
Rank 1
Share this question
or