Dropdownlists and date pickers showing detached after scrolling

[Kristen]

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>
</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>
</div>

[Nencho]

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

[Kristen]

Would the full chtml page and the css be enough? Or would you need the layout as well?

[Nencho]

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

[Kristen]

ok thank you, I sent that information in a support ticket. Thanks for your help!

[neet-o]

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>

    <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>

    <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>

    <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>
    </div>
</div>


<style>
    .k-edit-form-container .k-button {
        margin: 1px;
        padding: 0 1.6em 0 .857em;
    }
</style>

 

[Kristen]

I did fix the issue, turns out there was a bug in jquery 2.2.0, I upgraded to jquery 3.3.1 and I no longer have the issue.

Here is a link to the issue they gave me where they mention the bug:

https://github.com/telerik/kendo-ui-core/issues/3604

 

[neet-o]

Thanks a lot, upgrading jQuery fixed the issue.