DDL Alignment Issue with Android Chrome

2 posts, 0 answers
  1. Jeffrey
    Jeffrey avatar
    5 posts
    Member since:
    Aug 2012

    Posted 01 Jun 2015 Link to this post

    I have a problem with the DDL not lining up with the other controls on the same html line. (see attached images)

    Below is the entire page (in razor). I am using the default skin. If the user swaps to portrait mode, the DDL wraps the the next line, but displays covering the bottom half of the textbox. Any ideas why this does not look right in Android Chrome - but fine in IOS Safari?

    TIA,

    Jeff

     @(Html.Kendo().MobileView()
        .Title("Mobile Home Page")
        .Name("Index")
        .Content(@<text>
            <div>
                Address:
                @Html.Kendo().TextBox().Name("tbAddress").HtmlAttributes(new { style = "width: 100px" })
                @Html.Kendo().Button().Content("+").Name("btnExpSearch")
                @Html.Kendo().Button().Content("SEARCH").Name("btnSearch")
                @(Html.Kendo().DropDownList()
              .Name("ddlTrades")
              .DataTextField("Text")
              .DataValueField("Value")
              .BindTo(new List<SelectListItem>() {
                  new SelectListItem() {
                      Text = "Plumbing",
                      Value = "1"
                  },
                  new SelectListItem() {
                      Text = "Electric",
                      Value = "2"
                  },
                  new SelectListItem() {
                      Text = "HVAC",
                      Value = "3"
                  }
              })
              .Value("1")
                )
            </div>
    <br />
            @(Html.Kendo().Grid<HomeController.grid_results>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Address);
        columns.Bound(c => c.Builder);
        columns.Bound(c => c.Neighborhood);
        columns.Bound(c => c.NextStage);
        columns.Bound(c => c.NeedBy);
        columns.Bound(c => c.Hold);
    }).Pageable()
    .DataSource(ds => ds.Ajax().Read(read => read.Action("Jobs_Read", "Home")))
            )
        </text>)
    )

  2. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 03 Jun 2015 Link to this post

    Hi Jeff,

    The reason for the misalignment is obscure at this point, but I suggest you to try setting the same vertical-align CSS style to all widgets that reside on the same line.

    Regards,
    Dimo
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top