Popup position doesn't follow Button or Input position when width change

[Geraud Bertrand]

Hello Support,

I would want to make Pop-up follow the component who open it. I did some research and found that e-popup have a absolute position and calculate top and left attribut to make them have right side align with DateRangePicker or DropDownList.

In my component with a DateRangePicker:

<SfDateRangePicker TValue="DateTime?" StartDate="@_StartDate" EndDate="@_EndDate" CssClass="mb-0">
    <DateRangePickerEvents TValue="DateTime?" ValueChange="DateRangeChanged" @on></DateRangePickerEvents>
    <DateRangePickerPresets>
        <DateRangePickerPreset Label="Cette Semaine" Start="@weekStart" End="@weekEnd"></DateRangePickerPreset>
        <DateRangePickerPreset Label="Ce mois-ci " Start="@thisMonthStart" End="@thisMonthEnd"></DateRangePickerPreset>
        <DateRangePickerPreset Label="Le mois dernier" Start="@lastMonthStart" End="@lastMonthEnd"></DateRangePickerPreset>
        <DateRangePickerPreset Label="Cette année " Start="@thisYearStart" End="@thisYearEnd"></DateRangePickerPreset>
        <DateRangePickerPreset Label="L'année dernière" Start="@lastYearStart" End="@lastYearEnd"></DateRangePickerPreset>
        <DateRangePickerPreset Label="Tout" Start="@allStart" End="@allEnd"></DateRangePickerPreset>
    </DateRangePickerPresets>
</SfDateRangePicker>

The DateRangePicker and the popup open before width change:

And the DataRangePicker when width change after opening it:

Do you have any idea on how i could make the popup follow the position of the DateRangePicker when the windows size change ?

[Deepak Ramakrishnan]

Hi Geraud, 

 

Greetings from Syncfusion support. 

 

We have validated the reported issue in our end with provided details , But unfortunately we couldn’t able to reproduce the reported issue in our end in latest version(19.3.48) 

So we request you to upgrade your Syncfusion version to the latest and let us know the issue still reproduced at your end. 

 

Demo Link : https://blazor.syncfusion.com/demos/daterangepicker/preset-ranges?theme=bootstrap5  

 

[Snapshot-1] 

 

 

 

[Snapshot-2] 

 

 

 

 

Thanks, 

Deepak R. 

 

[Geraud Bertrand]

Hello,

I saw your demo but your demo has the same problem for me ( if you reduce windows size) the popup doesn't follow the daterangepicker position. You create the popup in absolute position, the problem is if I want to resize window, the popup can be outside. It's not a problem like a bug but more a problem on capacity and responsive side.

Do you have a method to make it follow the daterangepicker position or did you make it possible to change position of popup to relative/sticky... ?

[Deepak Ramakrishnan]

Hi Geraud, 

 

Thanks for your update. 

 

We are facing the reported issue while minimizing the screen when the popup in open state. We will further validate and update the details in two business days(12^th,November 2021).We appreciate your patience until then. 

 

Thanks, 

Deepak R. 

[Deepak Ramakrishnan]

Hi Geraud, 

 

Thanks for your patience. 

 

We have validated the reported issue in our end . We can overcome the issue by using ‘refreshPopup’ method at script end  in window resize event . It will trigger whenever the window get resized and the refresh popup method refreshes the popup position at required place .Kindly refer the below code snippet and sample for your reference. 

 

[Javascript.js] 

window.addEventListener('resize', function (event) { 

    document.getElementById('daterange').blazor__instance.refreshPopup(); 

}); 

 

 

[index.razor] 

 

<SfDateRangePicker TValue="DateTime?" ID="daterange" Placeholder="Choose a Range" ShowClearButton="true"> 

            <DateRangePickerPresets> 

                <DateRangePickerPreset Label="This Week" Start="@WeekStart" End="@WeekEnd"></DateRangePickerPreset> 

                <DateRangePickerPreset Label="This Month" Start="@MonthStart" End="@MonthEnd"></DateRangePickerPreset> 

                <DateRangePickerPreset Label="Last Month" Start="@LastMonthStart" End="@LastMonthEnd"></DateRangePickerPreset> 

                <DateRangePickerPreset Label="Last Year" Start="@LastYearStart" End="@LastYearEnd"></DateRangePickerPreset> 

            </DateRangePickerPresets> 

        </SfDateRangePicker> 

 

 

Sample Link : https://www.syncfusion.com/downloads/support/forum/170230/ze/BlazorApp1-2051350155  

 

 

Thanks, 

Deepak R.