List items appear with no margin on left

[Reid]

When I drop down a dropdown list (DropDownListFor) , it's items are not margined and are truncating to the left.  Can anyone suggest a style to override or a way to set this? 

Thanks

[Dimitar]

Hello Reid,

I am attaching an ASP.NET Core solution, where a similar scenario to the one described is demonstrated (DropDownList with large text items.) You will notice that although the DropDownList has a width of 200px, the popup list does not wrap the item labels on new lines.

To achieve the desired result, the DropDownList's AutoWidth option is used:

@(Html.Kendo().DropDownList()

.Name("news")

.DataTextField("Text")

.DataValueField("Value")

.AutoWidth(true)

.BindTo(new List<SelectListItem>() {

 new SelectListItem() {

 Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ",

 Value = "1"

 },

 new SelectListItem() {

 Text = "Praesent sodales fermentum turpis ac tempor",

 Value = "2"

 },

 new SelectListItem() {

 Text = "Nullam semper est vel molestie viverra",

 Value = "3"

 }

})
  .Value("1")

.HtmlAttributes(new { style = "width: 200px" })

)

Regards,
Dimitar
Progress Telerik

[Reid]

Thank you roe replying.  I put the code in please and see no change, the items in the list are still in need of a margin on the left.

Any styles here to override?

[Reid]

I forgot to mention that the control is a DropDownListFor<>/

[Dimitar]

Hello Reid,

I assume that the issue is related to project specific styling. Therefore, may I ask you to update the solution that I have sent with my previous reply, so that the issue faced is reproduced and then attach it here as a .zip archive?

In the mean time you could try to pin-down the exact cause of the issue by commenting the stylesheets that are loaded on the current page. In addition to this, the browser DOM inspector could be used to check which styles are overriding the Kendo theme that is currently loaded in the project. 

Regards,
Dimitar
Progress Telerik

[Reid]

Ok I will investigate it that way but is there not a factory style that exists for the drop down items that I could override in this template ?

[Dimitar]

Hello Reid,

You could try overriding the default styling to achieve a similar effect to the AutoWidth property as follows:

<style>
.k-list-container {
  white-space: nowrap !important;
  width: auto !important;
}
</style>

Regards,
Dimitar
Progress Telerik

[Reid]

Hi Dimitar,

I have decided to use the Bootstrap Select and have got it working fine.   It does seem to me that the Kendo Drop Down does not have the incremental search built in other that the first char typed.  Whereas the Bootstrap SelectList will show what you have typed in a search box as well as using a "contains" style so that items in the list that contain that pattern are displayed.  Many other configurable options as well.

 

Thanks

 

[Dimitar]

Hi Reid,

I am glad to hear that you have managed to achieve the desired result.

Concerning the search functionality, the Kendo UI DropDownList has a built in filtering, which allows the user to choose from startswith, endswith and contains types. Those can be configured with the HtmlHelper as follows:

@(Html.Kendo().DropDownList()
  .Name("products")
  .DataTextField("ProductName")
  .DataValueField("ProductID")
  .HtmlAttributes(new { style = "width:100%" })
  .Filter(FilterType.Contains)
)

In case the filtering functionality needs to be customized further, the widget also provides the ServerFiltering options, which forces the filtering implementation to the remote service, thus allowing the user to have full control over the returned results (e.g filter by multiple fields). An example implementation of Kendo UI DropDownList with server filtering can be observed on the following ASP.NET Core Demo.

Regards,
Dimitar
Progress Telerik