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?

CodePudding user response：

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 ybut 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!