dropdown lists search fields, first item getting hidden by navbar

[jose KJ]

I am having a single shared repo for both web,mobile app, i am useing syfusion blazor web templates

<SfDropDownList TValue="string" TItem="Cars" Placeholder="Select a Car" AllowFiltering="true" DataSource="filteredCars" @bind-Value="model.Car" Enabled="!isLoadingCar">

    <DropDownListFieldSettings Text="CarName" Value="DisplayId" />

    <DropDownListEvents TValue="string" TItem=" Cars " ValueChange="clearAndReftech"></DropDownListEvents>

</SfDropDownList>

in web when i am testing in browser it work correctly


i want to add a mrging top of 50px when in mobile device so popup  will start just below appbar


i found that i cant override the style for dropdwon list as this hight,margin is set dynamicallly on dropdwon click, please guide me

[Priyanka Karthikeyan]

Hi jose KJ,

Using the CssClass property to set custom styles for the dropdown popup. Here’s how you can use it to add a margin-top to your dropdown popup specifically for mobile devices:

 

 

@using Syncfusion.Blazor.DropDowns

 

<SfDropDownList TValue="string" TItem="Games" AllowFiltering="true" CssClass="custom-dropdown" Placeholder="Select a game" DataSource="@LocalData">

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

</SfDropDownList>

 

<style>

   .custom-dropdown.e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {

    margin-top: 50px;

}

</style>

 

 

Sample:https://blazorplayground.syncfusion.com/BDrzNONBfcnCSZQP

 

If you prefer to prevent the dropdown popup from taking up the full page on mobile devices and display it similar to the desktop version, please refer to the public forum discussion for additional guidance.

Regards,

Priyanka K