Footer cell vs content cell when there's a scrollbar

Question

HiWhen the grid has a scrollbar, the footer's cell is a bit longer than the content's cellSee the dead space on the right? it is just below the scrollbar (content).See that the numbers are centered but as they go right, they lose the center and the last number ($522.78) is not in the center anymore.Happens on both chrome and Firefox. In the above case, the content cell's width is 95 while the footer cell's width is 96.Happens with version 18.1.59.

Vignesh Sivagnanam · Accepted Answer

Hi Amos, 

Greetings from Syncfusion support. 

We have validated the reported issue with given screenshot and tried to reproduce this issue but it was unsuccessful at our end.  Please the sample and screenshot for your reference. 


Sample : https://codesandbox.io/s/281827-1exc9?file=/App.vue 

Screenshot for your reference: 

1. 
  

2. 
  


But , we have suspected that the reported issue might occur when you have apply any customization on the first cell of the aggregate row. Kindly share the following details to validate the reported issue at our end.  


Share the full Grid code example.
Share the details if you have applied any customization in the aggregate row.
Share the sample or modified the given above sample with your reported issue if it is possible. 

Above requested details will be helpful for us to validate the reported issue at our end and provide solution as soon as possible.  

Regards,Vignesh Sivagnanam

Amos · Answer

You are right, I have styling for the first aggregate column. Following is the code. I tried changing your example but the problem didn't happen so I hope the following will give you a clue on what might be causing this issue on my side. Thanks. footerSum: function() { return { template: Vue.component("Sum", { template: "{{formatCurrency(this.userInfo().settings.useCurrency[this.userInfo().itemName],data.Sum, 2)}}", data() { return { data: {}, }; }, }), }; }, footerCount: function() { return { template: Vue.component("Count", { template: "{{data.Count}} assets", data() { return { data: {}, }; }, }), }; },

formatCurrency: (theCurrency, value, digits) => {

if (theCurrency == null) theCurrency = "USD";

return new Intl.NumberFormat("en-US", { style: "currency", currency: theCurrency, maximumFractionDigits: digits != null ? digits : 4 }).format(

value

);

},

Vignesh Sivagnanam · Answer

Hi Amos, 

We tried to reproduce the reported problem by creating a sample with the provided code , but we could not face the problem from our end. We suspect It caused by, if you apply any padding customization in the aggregate column. We attaching the sample which we have tried your code example. Please refer the below sample and the screenshot for your reference, 

Sample : https://codesandbox.io/s/281827-1exc9?file=/App.vue 

Screenshot for your reference: 
 
1. 
  

2. 
  

If you have faced same issue again, kindly share the following details to validate the reported issue at our end.  


Share the full Grid sample with the reported issue.
Share the Hosted link of the sample.
If possible try to reproduce the reported issue in provided sample and get back to us. 

Above requested details will be helpful for us to validate the reported issue at our end and provide solution as soon as possible.  

Regards, 
Vignesh Sivagnanam

Amos · Answer

I must say that I'm completely lost with this one.I have 2 (other) pages with a very complex grids and they both work as expected.There is one specific page, with 2 grids and both have the same problem with the footer.I even started a brand new page and just added one simple grid and the problem is there...The other 2 pages? Are still working ok...Here is how it looks, the simple grid with one column and footer (notice the 2 arrows)Here is the code

I didn't even put any styling but even with bootstrap4 and material it happens...

Amos · Answer

I noticed something:This is taken from your project:

This is taken from my project

As you can see, e-footerpadding is missing from my project and that class has padding: 14px which is exactly the scrollbar width.So the question would be: what might be causing that element to be missing?

Vignesh Sivagnanam · Answer

Hi Amos 
Thanks for the update 
We have tried to reproduce reported but it was unsuccessful at our end.Also we need some clarification with your code and customisation. So we can setup a web meeting to look on to the problem. Please let us know your availability for web meeting. We will make every effort to have this scheduled on a date and time of your convenience.  
Regards, 
Vignesh Sivagnanam

Amos · Answer

Thanks, please see the incident I opened.

Rajapandi Ravi · Answer

Hi Amos, 

Thanks for the update 

We have send you the meeting invite in your created incident. After the meeting we will split that incident and create a separate incident for Grid query. 

Regards,Rajapandi R