Dropdownlists and date pickers showing detached after scrolling in UI for ASP.NET Core

This is a migrated thread and some comments may be shown as answers.

Dropdownlists and date pickers showing detached after scrolling

7 Answers 58 Views

This is a migrated thread and some comments may be shown as answers.

Kristen asked on 18 Jan 2018, 08:56 PM

dropdownlist-issue.png

Hi, I'm having a weird issue with dropdownlists and date pickers. Basically they work fine if I dont scroll may page at all but when I scroll it looks like the dropdown or datepickers child items are stuck at the original position relative to my page height.

I attached a screenshot of what is happening.

Most of my controls are pretty basic. Is there something I'm missing in the controls thats messing with the placement of the child items?

Here is one of my drop down lists:

<div class="form-group">

<label asp-for="timezone" class="user-label col-md-2"></label>

<div class="col-md-4">

@(Html.Kendo().DropDownList()

.Name("timezone")

.DataTextField("Text")

.DataValueField("Value")

.OptionLabel("Select Time Zone")

.BindTo(new List<SelectListItem>() {

new SelectListItem() { Text = "0 EST", Value = "0" },

new SelectListItem() { Text = "-1 CEN", Value = "-1" },

new SelectListItem() { Text = "-2 MTN", Value = "-2" },

new SelectListItem() { Text = "-3 PAC", Value = "-3" },

new SelectListItem() { Text = "-4 ALA", Value = "-4" },

new SelectListItem() { Text = "-5 HAW", Value = "-5" },

new SelectListItem() { Text = "+1 ATL", Value = "1" },

new SelectListItem() { Text = "+1.5 NFI", Value = "1.5" }

})

.Value(Model.timezone.ToString())

)

</div>

Here is one of my date pickers:

<div class="form-group">

<label asp-for="sign_on_expiry_date" class="user-label col-md-2"></label>

<div class="col-md-4">

@(Html.Kendo().DatePicker()

.Name("sign_on_expiry_date")

.Value(Model.sign_on_expiry_date)

)

</div>

7 Answers, 1 is accepted

answered on 23 Jan 2018, 01:35 PM

Hello Kristen,

I have performed some local tets, base on the provide code snippet,but the demonstrated visual defect was not replicated. Commonly, such issues arise due to some custom css style rule on the page, which gets applied to the dropdown element of the widget and misplaces it. That being said, we would need to have a runnable example, replicating that issue, so we could locate the problematic rule and fix it for you.

Regards,
Nencho
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 23 Jan 2018, 02:53 PM

Hello Kristen,

I am afraid that I cannot be certain what would be sufficient, because, the problematic css may come, inherited from the layout or it could be applied in the very same view. This is why, my suggestion would be to create a simple web application and place the widgets there (using some dummy data source) and use the css style rules untill the issue gets replicable. Then you can send us this project (in a support ticket) so we could locally revise it.

Regards,
Nencho
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 14 Feb 2018, 03:00 PM

untitled.jpg

Hi, have you managed to resolve this? I get exactly the same issue dropdownlist is detached once the page is scrolled down.

Also when I try to move the pop up window it behaves in a weird way - it just jumps in a random way and often goes out of the visible area. The same goes for MultiSelectFor.

Here's the code of pop up:

@model SalesForecast.Models.ProcessViewModel

<div class="form-horizontal form-horizontal-compensate-margin">

@Html.HiddenFor(model => model.Id)

<div class="form-group">

@(Html.LabelFor(model => model.Service, "Service", new {@class = "col-md-2 control-label"}))

<div class="col-md-6">

@Html.Kendo().TextBoxFor(model => model.Service).HtmlAttributes(new { style = "width: 100%" })

</div>

<div class="form-group">

@(Html.LabelFor(model => model.IsActive, "Active", new { @class = "col-md-2 control-label no-padding-top" }))

<div class="col-md-6">

@Html.Kendo().CheckBoxFor(m => m.IsActive)

</div>

<div class="form-group">

@(Html.LabelFor(model => model.PrimaryHpo, "HPO", new { @class = "col-md-2 control-label" }))

<div class="col-md-6">

@(Html.Kendo().DropDownListFor(model => model.PrimaryHpo)

.OptionLabel("Select HPO...")

.DataTextField("Name")

.DataValueField("Id")

.DataSource(source => { source.Read(read => { read.Action("GetAllPrimaryHpos", "PrimaryHpo"); }); })

.HtmlAttributes(new { style = "width: 100%" }))

</div>

<div class="form-group">

@Html.LabelFor(model => model.Sources, "Sources", new { @class = "col-md-2 control-label" })

<div class="col-md-6">

@(Html.Kendo().MultiSelectFor(m => m.Sources)

.DataTextField("Name")

.DataValueField("Id")

.BindTo((IEnumerable<SalesForecast.Models.Source>)ViewData["sources"])

.HtmlAttributes(new { style = "padding: 0" }))

</div>

<style>

.k-edit-form-container .k-button {

margin: 1px;

padding: 0 1.6em 0 .857em;

}

</style>