This is a migrated thread and some comments may be shown as answers.
No records message is not vertically aligned
3 Answers 76 Views
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Dan asked on 14 Oct 2019, 06:06 AM

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.

3 Answers, 1 is accepted

Sort by
0
Teya
Telerik team
answered on 15 Oct 2019, 01:39 PM

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.
0
Dan
Top achievements
Rank 1
answered on 05 Nov 2019, 01:39 PM

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.

0
Teya
Telerik team
answered on 06 Nov 2019, 08:52 AM

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.
Asked by
Dan
Top achievements
Rank 1
Answers by
Teya
Telerik team
Dan
Top achievements
Rank 1
Share this question
or