Dropdownlists and date pickers showing detached after scrolling

8 posts, 0 answers
  1. Kristen
    Kristen avatar
    7 posts
    Member since:
    Dec 2017

    Posted 18 Jan 2018 Link to this post

    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>
  2. Nencho
    Admin
    Nencho avatar
    1880 posts

    Posted 23 Jan 2018 Link to this post

    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.
  3. Kristen
    Kristen avatar
    7 posts
    Member since:
    Dec 2017

    Posted 23 Jan 2018 in reply to Nencho Link to this post

    Would the full chtml page and the css be enough? Or would you need the layout as well?
  4. Nencho
    Admin
    Nencho avatar
    1880 posts

    Posted 23 Jan 2018 Link to this post

    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.
  5. Kristen
    Kristen avatar
    7 posts
    Member since:
    Dec 2017

    Posted 23 Jan 2018 in reply to Nencho Link to this post

    ok thank you, I sent that information in a support ticket. Thanks for your help!
  6. neet-o
    neet-o avatar
    11 posts
    Member since:
    Jun 2016

    Posted 14 Feb 2018 Link to this post

    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>

     

  7. Kristen
    Kristen avatar
    7 posts
    Member since:
    Dec 2017

    Posted 14 Feb 2018 in reply to neet-o Link to this post

    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

     

  8. neet-o
    neet-o avatar
    11 posts
    Member since:
    Jun 2016

    Posted 14 Feb 2018 Link to this post

    Thanks a lot, upgrading jQuery fixed the issue.
Back to Top