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
Top achievements
Rank 1
Kristen asked on 18 Jan 2018, 08:56 PM

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>

7 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
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.
0
Kristen
Top achievements
Rank 1
answered on 23 Jan 2018, 01:53 PM
Would the full chtml page and the css be enough? Or would you need the layout as well?
0
Nencho
Telerik team
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.
0
Kristen
Top achievements
Rank 1
answered on 23 Jan 2018, 09:13 PM
ok thank you, I sent that information in a support ticket. Thanks for your help!
0
neet-o
Top achievements
Rank 1
answered on 14 Feb 2018, 03:00 PM

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>

 

0
Kristen
Top achievements
Rank 1
answered on 14 Feb 2018, 05:00 PM

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

 

0
neet-o
Top achievements
Rank 1
answered on 14 Feb 2018, 05:40 PM
Thanks a lot, upgrading jQuery fixed the issue.
Asked by
Kristen
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Kristen
Top achievements
Rank 1
neet-o
Top achievements
Rank 1
Share this question
or