We Keep Coding

How to set scrollable content dinamically in ng zorro table?

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?

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!

CSS Grid Container Height Covers Other Content

I'm building a responsive CSS grid with items whose sizes match a desired aspect ratio. I've tried the padding hack among a few other techniques, but nothing has worked nearly as well for me as using JS to determine the pixel value of 1fr for the desired number of columns and the gap size, and then applying that to the row sizing using repeat(auto-fill, minmax(${width}px, 0)).
Unfortunately, this approach comes with a rather nasty side effect: the parent div (display: grid) doesn't know the height of its own content, so it never sizes correctly. As a result, it's never able to show more than one row of the grid. The rest of the grid items display as a line just below that first row.
To fix this, I've tried setting the height of the parent to 100%, but that covers all of the other content on the page. I've tried using containers to fix the sizing, but haven't had any luck there, either. I've also tried overflow: auto, to no effect. If I could calculate and manually set the height of the parent div in my script, that might work, but I've not been able to find a way to do so (and also seems like a messy approach).
Is there any (good) way to do this? Here's a demo of the issue: https://codepen.io/jmindel/pen/GRoMjEw

when you set the overflow: auto it will make a scroll bar in your element to show all of the content in the specified area. then in this case it won't help you. when you set the height of an element to 100% it's height will be the same as it's parent element. I had this problem before. if you want to set the height of an element you should set the height attribute of all the parents of the parents of your element. you can use % as the unit of height and width if you want your code be responsive and don't want to calculate the exact height of elements and if not you can use other units. try to set height with % unit for all of your parents. it helped me and I am sure it will help you too.

Here's what I wound up doing:
I tried wrapping .grid in another div and styling that wrapper such that it has overflow: scroll, which fixes the height not displaying (100% is fine in this environment--it doesn't cover anything, since it's limited to the height of its block-level parent).
I wrote a script that temporarily sets the grid's height to a very large number, finds the lowest element in the grid, and uses its position to determine the grid's height, which gives it a forced pixel height until the next resize.
A few shortcomings of this approach:
The grid must be contained to a scrollable subcontainer, which works well for my use, but might not for others.
The grid's height should size properly, but didn't without a forced pixel height. min-content and max-content did not work.

Fixed width and flexible count of columns with HighCharts / HighStock

I'm using HighStocks and here is little example to show what i mean:
http://goo.gl/m90FGh
I wanna use those columns also for navigation(to click) so i want to have fixed width for them and with disabled grouping. The issue is when i'm trying to resize the chart (e.g. browser window is smaller). If i disable grouping and set fixed width it will create the same count of cols on the screen but those are overlapping each other. I would like to resize chart, keep columns without overlap and set another "zoom/range" in navigation/minichart to display smaller number of columns with the same width. It's about constant width & space between the columns. Is it somehow possible?
UPDATE:
I tried this solution: http://goo.gl/ojmsFN
It works but only if i shrink the screen/browser, not if i try to expand it again. The range stays still the same in this case, i don't know why.
Thanks for any advices!

Issue with responsive d3 graph

I'm having a really strange problem with my d3 graph. It works perfectly if I never enlarge the window past the initial dimensions. The graph will shrink when I shrink the window and enlarge when I enlarge the window. However, if I try to enlarge past the the initial size (when the page first loaded), it will not enlarge. It seems that there is some maximum size set to the dimensions of the graph when the page firsts loads. Does anyone have any idea what could cause something like this?
EDIT: Another issue with my graph is that there a mouse-over tool tip which appears where the mouse is, but it always appears underneath the path line. How can I ensure that it appears above the line?

You need to use the window.onresize function so that the increased area is available for use. Here is an example of a responsive d3 chart using the resize event to update the scales.
For the circle, you need to figure out how to update the circle's coordinates to put the circle in the appropriate place.

Well although this is definitely not an ideal or elegant solution, I did figure out a way to solve this. I set initial width and height to the largest the graph to ever be and then the resize function so it would shrink the the correct size. The graph now resizes up until that very large width and height, which is never reach, so it all works great.

I have the same problem. I initialize the chart like this:
var chart = d3.select(ele[0]).append("svg").attr("class", "chart").attr("height", height).append("g").attr("transform", "translate(15,30)");
Then, on $window.onresize, I get a new height and width (data in there are correct) and try to set them:
chart.attr("width", width);chart.attr("height", height);
And this is not working. Any ideas why?
EDIT: Searching for few hours, find nothing, post the question and find a solution. Maybe this will be helpful for someone:
I changed my above code to
d3.select(ele[0]).selectAll('svg').attr('height',height).attr('width',width);
So I did not used chart to resize, I select the element again. Then it works.

jquery resize function not working the way I'd expect

I have a container element that has an <img> tag in it. The width of the image is 100%, and the height is auto. Overflow on the container is set to hidden and it also has a max-height and min-height. The idea is to have the image determine the height of the container, within the max and min breakpoints.
So, the container has a relative height. In order to have a fluid transition, I reset the height on the resize event (for a complicated reason, the img itself does not set the height, rather it is calculated and then changed via javascript). This works fine, and when I resize the window, it all works right.
But some of the logic that is in the resize event I want to run on the load event as well. So, I thought I would just call resize within load, like so:
$(window).load(function(){
$(window).resize();
});
But, this did not work. With this code, if I manually resize the window even just one pixel, the containing element will scale properly (it's about a 200px difference from the height calculated on load to the reset, properly scaled height).
Apparently, my understanding of how this works is wrong. I have called other events before like this to fire the event and trigger something else. How can I accomplish what I want?

Still wondering what's actually being achieved by re-sizing the window but another way to trigger resize would be :
$(window).load(function() {
$(this).trigger('resize');
});

Try .ready instead of .load
$(window).ready(function);
Here's a jsfiddle

I do not know what the problem was. I changed my approach and found a different solution that does not need the resize event to be called on load.