Wrong style?

8 posts, 0 answers
  1. Mattias
    Mattias avatar
    263 posts
    Member since:
    Aug 2012

    Posted 14 Feb 2013 Link to this post

    Hi,
    I have a datepicker, textbox and one autocomplete box on my page. Textbox and autocomplete looks fine but the datepicker doesn't align correctly. Bug?
    Looks the same in IE9 and FF17.



    Regards,
    Mattias
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 14 Feb 2013 Link to this post

    Hi Mattias,

    I could not reproduce the issue on our side and I think it is caused by some custom styles in your page. For your convenience I am attaching the sample project, that I tested with. Please let me know if it covers your case.
     

    Regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Mattias
    Mattias avatar
    263 posts
    Member since:
    Aug 2012

    Posted 15 Feb 2013 Link to this post

    Hi,
    But I can reproduce it with your example code. If you add one div tag around each box, you'll see what I mean:
    @{
        ViewBag.Title = "Home Page";
    }
     
    <div>
        @(Html.Kendo().DatePicker()
                  .Name("datepicker")
            )
    </div>
    <div>
        <input type="text" name="name" value="" />
    </div>
    <div>
        @(Html.Kendo().AutoComplete()
              .Name("country")
              .Filter("startswith")
              .Placeholder("Select country...")
              .BindTo(new string[] {
                    "Albania",
                    "Andorra",
                    "Armenia",
                    "Austria",
                    "Azerbaijan",
                    "Belarus",
              })
              .Separator(", ")
        )
    </div>
    <div>
        <input type="text" name="name" value="" />
    </div>
    The datepicker have different margins then the autocomplete.



    /Mattias
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 15 Feb 2013 Link to this post

    Hello Mattias,

    This alignment occurs, because of a top and bottom padding specified in the .k-input class in kendo.common.min.css file. To change this, you could overwrite the styles.
    E.g.

    span.k-datepicker.k-input
    {
        padding: 0;
    }

    You could also check the demo about Styling form elements like Kendo UI widgets.


      Greetings,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Mattias
    Mattias avatar
    263 posts
    Member since:
    Aug 2012

    Posted 18 Feb 2013 Link to this post

    Hi,
    Thank you, that did help.
    But is it not a bug that it has different margins/paddings than for example the autocomplete?

    /Mattias
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 18 Feb 2013 Link to this post

    Hello Mattias,

    After discussing this issue with our development team, it seems that this is indeed a bug in the styling of the widgets. It will be fixed in Q1 2013 release. As a sign of gratitude I am adding Telerik points to your account.

    Wish you a great day!
     

    Greetings,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Mattias
    Mattias avatar
    263 posts
    Member since:
    Aug 2012

    Posted 20 Feb 2013 Link to this post

    Hi,
    I just tried the numerictextbox, and it seems to have the wrong styling to.

    /Mattias
  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 20 Feb 2013 Link to this post

    Hi Mattias,

    Thank you for noticing this. We are aware of the issue and it is already fixed. The fix will be available in the Q1 2013 release.

    Wish you a great day!

     

    Kind regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready