[FileManager] Scrolling when number of files increases

Cerclique

Hello,

I am trying to use the Filemanager component from the @svar-ui/react-filemanager package.
When the number of files increases, it seems impossible to scroll down the list, at least in table mode.

Please refer to this minimal Stackblitz example that reproduces the observed behavior.

Is this normal? Is it a bug?
Is there a missing configuration that I may have overlooked?

Best regards,

tasha

Thank you for reporting this issue. We can confirm that this is a bug.
For now, as a temporary solution, you can resolve the scrolling issue by ensuring all outer containers have a height of 100%:

html, body, #root, .wx-theme {
  height: 100%;
}
body {
  margin: 0;
}

Cerclique

Hi,

Thank you for your prompt reply.

I have updated the Stackblitz example I shared earlier with your temporary fix.
Please, find the suggested CSS in the temporary_fix.css file.

It seems that there is one more issue.
The call to generateData(100) generates an array of files starting from file_0 to file_99.
If you scroll all the way down the list, the last visible file is file_98.
Looking at the DOM, we can see that file_99 exists but seems to be rendered outisde its container.
We can also see that the "bottom-edge" of the scroll bar is not visible.

I hope these few information can help you in your debugging.

Best regards,

tasha

Hi,

As a temporary workaroud you can apply such styles:

html,
body,
#root,
.wx-theme {
  height: 98vh;
  margin: 0;
}
body {
  margin: 0;
}

.filemanager .wx-filemanager .wx-content-wrapper .wx-content {
  height: calc(100% - 50px);
}
.filemanager .wx-filemanager .wx-content-wrapper .wx-sidebar {
  height: calc(100% - 50px);
}

Please check the example: https://stackblitz.com/edit/vitejs-vite-f8smxizx?file=src%2Ftemporary_fix.css

Cerclique

Hello,

Thanks again for the temporary workaround, we can now scroll inside the component.
Do you know when this bug will be fixed in a new version?

tasha

Hello ,
We expect to address it most likely this week, and we'll notify you as soon as the fix is released.