Little Help with Style problem

4 posts, 1 answers
  1. Daniel
    Daniel avatar
    11 posts
    Member since:
    Oct 2011

    Posted 08 Aug 2013 Link to this post

    I have 12 calendar on 2 <TR> in my view (6 calendars/TR)
    I need the calendar smaller so they all have the style :     .calendar {width: 150px;   height: 200px;}

    @(Html.Kendo().Calendar().Name("YearCalendarMay")
    .Min(new DateTime(Model.Year.Year,5,1)).Max(new DateTime(Model.Year.Year,5,31))      
     .Footer(" ").MonthTemplateId("cellTemplate").HtmlAttributes(new { @class = "calendar" })                             
            )


    I have the problems shown in the picture,probably because I set the Min and Max properties  :

    http://img825.imageshack.us/img825/5164/iud2.png


    And I try as you suggested to disable the click on title navigation but I'm missing something

    $(document).ready(function () {
            $("YearCalendarMay.k-nav-fast").off("click").css("cursor", "default");
            $("#YearCalendarMay.k-nav-fast").on("click", false);
        }); 

    I will appreciate some if you can help me please ..
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 08 Aug 2013 Link to this post

    Hi Daniel,

    Both selectors in the document.ready handler are invalid and do not return any elements.

    The first selector is missing the ID's hash sign, while both selectors target elements with a YearCalendarMay ID and a k-nav-fast CSS class at the same time. A proper descendant selector is required.

    In addition, the Calendars have reserved rows and cells for days from other months, which remain empty if these dates are not displayed. Hence the observed difference in date layout.

    Regards,
    Dimo
    Telerik
    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. Daniel
    Daniel avatar
    11 posts
    Member since:
    Oct 2011

    Posted 08 Aug 2013 Link to this post

    Thank you for the  "descendant selector"  lesson , that works fine now ..
    About the second problem :
    In my image March and April have dates on first row .. but the space between the lines is bigger to  April . why?
    If is no  way to remove this empty  TD .. (the problem is when I have a full row empty ex: September ) how to I make them have the size  of a normal row ?

  5. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 09 Aug 2013 Link to this post

    Hello Daniel,

    The screenshot does not provide enough information to conclude why there is a misalignment between the two Calendars on the first row. Can you provide a runnable example, which reproduces this?

    On a side note, you can align the Calendars on the second row with:

    .k-calendar .k-content td
    {
        height: 24px;
    }

    The exact height value may depend on the font size.

    Regards,
    Dimo
    Telerik
    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