1. Home
  2. Forum
  3. Blazor
  4. Dropdown list mobile view display

Dropdown list mobile view display

IMG-20211118-WA0010.jpg


I have other drop-down list components in other pages and they work just fine, both on PC or mobile.

But for some reason which I can't tell..

The drop-down component I have here misbehaves on mobile view but show well on PC. 
It either doesn't show or appears hidden on top. 

what may cause this ?



                <SfDropDownList TValue="string"

                                TItem="Level"

                                FloatLabelType="@FloatLabelType.Auto"

                                Placeholder="Select Level"

                                DataSource="@LevelLocalData"

                                @bind-Value="addeditOrderLine.CourseOrderLevel">

                    <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>

                </SfDropDownList>

                <ValidationMessage For="@(() => addeditOrderLine.CourseOrderLevel)" />

                <br />

                <SfDropDownList TValue="string"

                                TItem="Tuition"

                                FloatLabelType="@FloatLabelType.Auto"

                                Placeholder="Select Mode of Tuition"

                                DataSource="@TuitionLocalData"

                                @bind-Value="addeditOrderLine.CourseOrderTuition">

                    <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>

                </SfDropDownList>

                <ValidationMessage For="@(() => addeditOrderLine.CourseOrderTuition)" />



12 Replies
BC Berly Christopher Syncfusion Team November 19, 2021 01:55 PM UTC

Hi Boot Dat, 
  
Greetings from Syncfusion support. 
  
We have checked the reported issue. But unfortunately, the reported issue does not occurred at our end. So, we have prepared the sample and attached it below. 
  
  
Screenshot: 
  
 
  
So, please share the below requested details that will help us to check and proceed further from our end.  
  
·       Syncfusion NuGet version. 
·       Have you rendered the DropDownList component inside Grid or Schedule component? 
·       Issue faced mobile device details  
·       Have you faced this issue on chrome emulator? 
  
Regards, 
Berly B.C 


BD Boot Dat November 19, 2021 07:37 PM UTC

Hi Berly,


  • Version 19.3.0.43
  • a Dialog box component
  • Galaxy S7 and Huawei Mediapad and iphone 7
  • i dont know what you mean by chrome emulator but i dont have it..so havnt tried it on chrome emulator but i use Conveyor by Keyoti to test development on mobile devices. Also, with chrome browser, it does work fine in mobile view , but the problem also exist on iphone like showed in one of the pics below
  • chrome.PNG
  • WhatsApp Image 2021-11-19 at 7.17.55 PM.jpegWhatsApp Image 2021-11-19 at 7.28.56 PM.jpeg

DA Dineshkumar Arumugam Syncfusion Team November 22, 2021 05:51 PM UTC

Hi Boot Dat,  
 
We are currently validating the reported issue, we will update the details in one business day (23rd November 2021). We appreciate your patience until then. 
 
Regards, 
Dineshkumar A.  


BD Boot Dat replied to Dineshkumar Arumugam November 22, 2021 06:01 PM UTC

Hi  Dineshkumar,

Sure, anytime!


BC Berly Christopher Syncfusion Team November 23, 2021 02:29 PM UTC

Hi Boot Dat, 
  
We have checked the reported issue in the mentioned devices but the reported issue does not occurred at our end. So, we have taken screenshot and attached it below. 
  
Samsung Galaxy S7: 
  
 
  
iPhone 7: 
 
  
So, please share any issue reproducing sample or modify the attached sample which is help us to check and proceed further from our end. 
  
Regards, 
Berly B.C 


BD Boot Dat replied to Berly Christopher November 23, 2021 02:44 PM UTC

Hello  Berly

Thanks for the feedback, thanks for your time. 

i decided to make it searchable dropdown list to get rid of that problem so its fine.


BC Berly Christopher Syncfusion Team November 24, 2021 07:38 AM UTC

Hi Boot Dat, 
  
Most welcome. Please let us know if you need further assistance on this. 
  
Regards, 
Bely B.C 


BD Boot Dat December 5, 2021 06:22 PM UTC

I updated my project to .net 6 and now using Visual studio 2022.
All of a sudden, a dropdown list that has been working just fine, is now misbehaving like the other one.

Preview

PreviewII




PM Ponmani Murugaiyan Syncfusion Team December 6, 2021 07:18 PM UTC

Hi Boot, 

Thanks for the update 

We were unable to replicate the reported issue in our end. We request you to share the simple issue reproducing sample, which helps us to check and provide you the solution at earliest. 

Regards, 
Ponmani M 


BD Boot Dat December 8, 2021 09:13 AM UTC

Hi  Ponmani


The problem was, the dropdown list displays at the back of the dialog box if allowfiltering=true, It only started after i updated Syncfusion.Blazor to 19.3.0.57

I decided to downgrade back to 19.3.0.43 and its working like it was before.

so can i say the problem was with the update ?


BC Berly Christopher Syncfusion Team December 9, 2021 04:06 PM UTC

Hi Boot, 
  
We have already considered the reported issue as a bug at our end and this fix will be included in our weekly patch release after Volume 4 Main release which is expected to be rolled out on first week of January 2022. 
  
Please track the status from the below feedback. 
  
We can resolve the reported issue by increase the z-index property of the DropDownList component as mentioned below code example.  
   
  .custom.e-popup{  
        z-index: 2147483648;  
    }  
 
 
  
Regards, 
Berly B.C 


DA Dineshkumar Arumugam Syncfusion Team January 24, 2022 07:12 AM UTC

Hi Boot,

We are glad to announce that our patch release (V19.3.43) is rolled out successfully. The issue with the “DropDownList popup open behinds the modal dialog” has been resolved in this release. To access this fix, we suggest you to update the package to the latest version 19.3.0.43.



We thank you for your support and appreciate your patience in waiting for this release. Please contact us if you require any further assistance.

Regards,
Dineshkumar A.



Loader.
Up arrow icon