Device issue with allowfiltering true in Multiselect Dropdown in checkbox mode

[Niha Shaikh]

Hello,

Keep resolution of chrome by  1365*785  and then try any simple SfMultiSelect with allow filtering true.

the drop down open full size page.

[Prince Oliver]

Hi Neha, 

Thank you for contacting us. 

We have ensured the reported case in our end with reported resolution in chrome, the popup opens correctly in our end. Kindly refer to the following screenshot. 

 

Demo link: https://blazor.syncfusion.com/demos/multiselect-dropdown/filtering?theme=bootstrap5 

Kindly share us sufficient steps to replicate the issue in our end. 

Regards, 

Prince 

[Niha Shaikh]

Hi,

Kindly create MultiSelect with checkbox then set browser like 1366* 768 and then refresh keeping this resolution and then try to open multiselect it will overlay all content and appear on full page.

[Ponmani Murugaiyan]

Hi niha, 

Thanks for the update 

We able to replicate the reported issue and validating in our end. We will update further details in 2 business days (December 8, 2021). We appreciate your patience until then. 

Regards, 

Ponmani M 

[Berly Christopher]

Hi Niha, 

  

Thanks for the patience. 

  

We have checked the reported issue. We would like to inform you that, if you are accessing the popup in the tablet or mobile mode then the MultiSelect filtering popup will be displayed in the overall page for the better UI to the user. If you are accessing the component in the desktop mode, then popup will be displayed under the input wrapper. This is the intended behavior of the component.  Kindly confirm us whether you have ensured the sample in tablet / mobile or desktop /PC mode which help us to check and proceed further from our end.   

  

Regards, 

Berly B.C 

[Niha Shaikh]

Hi Berly,

We are using it for mac laptop users and testing it on both mac and desktop computers. 
So my concern is for laptop users it should not open it to full page.
Is there anyway we can stop the wrapper to come up on full page ?

[Berly Christopher]

Hi Niha Shaikh, 

  

As we mentioned earlier, when opening the popup in the mobile mode, it displays in the full screen which is implemented for the better UI experience for the user. So, this is a default rendering mode in the mobile devices.    

  

We can disable this behavior by overriding the popup element style as mentioned below code snippet.  

  

     <SfMultiSelect TValue="string[]" ID="multiselect" Mode="VisualMode.CheckBox" TItem="Countries" Placeholder="Select countries" DataSource="@Country" AllowFiltering="true"> 

            <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings> 

            <MultiSelectEvents TValue="string[]" TItem="Countries" Opened="Opened"></MultiSelectEvents> 

        </SfMultiSelect> 

  [Inject] 

    protected IJSRuntime JsRuntime { get; set; } 

 

 

    public async Task Opened(Syncfusion.Blazor.DropDowns.PopupEventArgs args) 

    {         

        await JsRuntime.InvokeVoidAsync("OnOpen", "multiselect"); 

    } 

window.OnOpen = function (id) { 

    setTimeout(() => { 

        if (ej.base.Browser.isDevice) { 

            var multiObj = document.getElementById("multiselect").blazor__instance; 

            var parentElement = multiObj.containerElement; 

            multiObj.popupObj.position = { X: 'left', Y: 'bottom' }; 

            multiObj.popupObj.width = parentElement.offsetWidth; 

            multiObj.popupObj.dataBind(); 

            multiObj.popupObj.element.classList.remove( 

            'e-ddl-device', 

            'e-popup-full-page' 

        ); 

      } 

    },30); 

 

} 

   <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> 

    <script src="~/client.js"></script> 

 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelect_Mobile_Fullscreen-1880678126  

  

Regards, 

Berly B.C