如何在 ng zorro 表中动态设置可滚动内容？

Question

I have a ng-zorro table and i would want the scroll bar to resize when i resize the browser window (say for example in a smaller device). So that it will be dinamically changed based on the page size, how to do that?

Answer 1

Well, firstly you should provide more context to your question: for example you could provide a minimal reproducible example and some code so we can have more context to the question asked.

But anyway i will try to answer your question:

Here's what you can do:

• looking at the ng-zorro table i see that there is a property for nzScroll that takes an object as argument.
• so when you delcare the table you can do this:

<nz-table [nzScroll]="{ y: 'calc(100vh - 276px)' }">
</nz-table>

What is that code doing?

• So since we want to scroll vertically (and not horizontally) we need to change the y axis ence the y: in the code.

• you can assign a pixel value to that y but that will result your scrollbar to have a fixed height so resizing the window will not resize the scrollbar.

• what i did was calculate all the elements heights in my page so that i know how much height my table is taking. I did this when the table was empty using an extension for google chrome smart page ruler extension

• knowing the elements height in my page i could subtract that amount to the viewHeight of my page.

• Therefore everytime you resize the window the scrollbar is going to resize because is calculating the difference between 100% of the viewHeight and the sum between all of your elements heights.

If you have any question about my answer i will happly answer, cheers!