No records message is not vertically aligned

4 posts, 0 answers
  1. Dan
    Dan avatar
    173 posts
    Member since:
    Nov 2017

    Posted 14 Oct 2019 Link to this post

    On the tree list when you have a filter on the start the no records data is not centered vertically.

    https://dojo.telerik.com/OTeNIcAr

    After you change the filter the no records data becomes centered vertically. How can this be solved?

    From the investigation it seems that the "k-grid-norecords-template" div has the style "style="margin:0 auto;position:static;"" which it should not be added to the div.

  2. Teya
    Admin
    Teya avatar
    1 posts

    Posted 15 Oct 2019 Link to this post

    Hi Dan,

    Thank you for reporting this issue. I have investigated it and it appears to be a bug, which is why I have logged it in our public repository here:

    https://github.com/telerik/kendo-ui-core/issues/5339

    In the meantime, as a workaround, you can apply the following CSS code:

    #treelist .k-grid-norecords {
    display: flex;
        align-items: center;
        justify-content: center;
    }

    It will ensure that the content inside the no-records container is vertically and horizontally centered. You can see the suggested approach in action in the updated Dojo:

    https://dojo.telerik.com/OTeNIcAr/3

     

    Finally, as a small token of appreciation for the bug report, I have updated your Telerik points.

     

    Regards,
    Teya
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Dan
    Dan avatar
    173 posts
    Member since:
    Nov 2017

    Posted 05 Nov 2019 in reply to Teya Link to this post

    Hi Teya,

    Thank you for the workaround however I am developing for the IE browser mainly and the workaround does not work on IE. Do you have a solution for all browsers.

  4. Teya
    Admin
    Teya avatar
    1 posts

    Posted 06 Nov 2019 Link to this post

    Hello Dan,

    To make it vertical in IE you can try with the following CSS instead:

      #treelist .k-grid-norecords-template {
            position: absolute !important;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
    }

    I have updated the Dojo with the suggested approach: 

    https://dojo.telerik.com/OTeNIcAr/5

    I hope this helps.

     

    Regards,
    Teya
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top