Issue
i would like to know if there is a possibility to get the viewport height of my ng boostrap modal in my Angular app. Here is what i have:
- A modal with a css styling like this:
.modal-xxl {
width: 95% !important;
max-height: 90% !important;
max-width: 95% !important;
height: 90% !important;
.component-host-scrollable {
height: 100%;
}
}
- Inside the modal i have a ng zorro table which i need to be scrollable
- I want to change the scrollable height based on this calculation:
calc(100vh - 221,09px)
so that if i resize the screen the scroll height resizes as well
- I do not know how to get that
100vh
inside the html file. - Right now the
nzScroll
property of ngzorro table only takes a number in px. I tried doing this:viewHeight = window.innerHeight
on my ts component and then putting it into the html like so:[nzScroll]="{ y: ' {{viewHeight}}px' }"
but it doesn't work ( i can't even scroll the table). If anyone can help i will thank him forever ahaha!!!
Solution
Okay so my problem was that this:
[nzScroll]="{ y: 'calc(100vh - 276.09px)'}"
Didn't work because of the point .
in the calculation.
So then i changed it to:
[nzScroll]="{ y: 'calc(100vh - 276px)'}"
And now works just fine.
If anyone was wondering how i got that 276px
i basically did a sum of all the modal elements that were of fixed size like:
- Modal header:
69px
- Modal Footer:
65px
- And then the table height which was:
142px
Therefore now if i decide to resize the window, the table scrollbar is going to resize as well.
Here is the before:
And that is the after:
As you can see if i increase the size of the table the table doesn't overflow the modal causing him to enable the scroll bar, it just resizes itself staying within the modal boundries.
Answered By - ludovicoilgrande
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.