No records message is not vertically aligned

[Dan]

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.

[Teya]

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

[Dan]

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.

[Teya]

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