Reduce the space between items in the edit dropdown list

[Danyelle]

I have a grid and in the edit dialog, I have a field that uses a drop-down list. In my drop-down list I would like to reduce the space between each item. What is the css property that would allow me to do this?

[Ajith Govarthan]

Hi Danyelle, 

Thanks for contacting Syncfusion support. 

Based on your query, you want to reduce the space between the dropdownlist items in your Grid application. So, we have shared the code example in that we have used the dialog edit mode. Using the actionComplete event and CSS properties we have reduced the space between each item in the dropdownlist for ShipCountry column. Please refer the below code example for your reference. 

Code Example: 

Index.cshtml 

<div class="control-section"> 

    @Html.EJS().Grid("DefaultPaging").ActionComplete("actionComplete").DataSource(ds => ds.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").InsertUrl("/Home/Insert").RemoveUrl("/Home/Remove").UpdateUrl("/Home/Update")).Columns(col => 

{ 

 

    col.Field("OrderID").HeaderText("Order ID").Width("120").IsPrimaryKey(true).Filter(new { type = "CheckBox" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").Width("170").Add(); 

    col.Field("OrderDate").HeaderText("Order Date").Width("130").EditType("datepickeredit").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("ShipCountry").EditType("dropdownedit").HeaderText("Ship Country").Width("150").Add(); 

 

}).Height("400").AllowPaging().Toolbar(new List<string> 

        () { "Add", "Edit", "Delete", "Update", "Cancel" }).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Render() 

</div> 

<script> 

    function actionComplete(args) { 

        if (args.requestType === "add" || args.requestType === "beginEdit") { 

           

            var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

            args.form.querySelector("#"+grid.element.id+"ShipCountry").ej2_instances[0].open = onDropdownOpen  // use (grid id+ column name)  // to find the dropdown component in the form element 

        } 

    } 

 

    function onDropdownOpen(args) { 

        args.popup.element.querySelector(".e-dropdownbase").classList.add("custompopup"); // add custom class to apply the css only for  //editing feature dropdowns 

    } 

</script> 

<style> 

    .e-dropdownbase.custompopup .e-list-item { 

        line-height: 18px; 

        min-height: 10px; 

    } 

    </style> 

Please get back to us if you need further assistance. 

Regards, 

Ajith G