Check if height is filled with any type of content in React - reactjs

For example, I'm trying to build a browser sizes paper in the format of A4, so somehow I want to track the height of the content, for example when 200px height is filled with content any type of it, in case it needs more space to grow with the content to create another div or something and the content to continue on that part, and so and so, so like pages in A4.

Related

Creating Real A4 Pages in React

So, I'm trying to achieve a view that looks like an A4, but the problem is that when I have so much content the view height changes, and then it is no anymore an A4.
I want to find a solution, to break the pages, for example, when height: 200px is filled with content, text, or image or whatever, to skip and add another div with 200px height, and so on, to continue, in a type of form to create pages of pdf.

Non scrollable SPA with Images not resizing

I am trying to create a SPA with react and material-ui. I want the page the page to have the size of the screen and the content has to resize and fit to it.
I am using a Grid from material-ui with two rows and one column.
The first row has a ImageList with images to fit the remaining room.
The second row has some stuff that does not matter.
The problem: when I load the images the first row resize itself growing more than the room available to it. I tried to fix the size of the ImageList but it transform itself to a scrollable component. So, the images never resize! The size set to them are to fit to the parent size.
Thank you

SVG graph and table is collapsing when not given a specific size

So I have a graph and table that show results according to the number of flights, but I want their size to be automatic, but right now if I don't give the div that is wrapping them together a specific size, they will end up collapsing. See the attachment enter image description here
The div container cannot be resized by charts. All charts as a default fir to the div container. It means that you should define the div size by CSS manually, for example, 100% of the parent's element or specific size in px.
Inside the div, you can adjust the table and chart manually.
In the comment below you can find the sample of a table and a column chart. Every one of them is 50% height of the div container. And the div container occupies 100% of the body.

How to check if a dynamic background image is too big to fit in angularjs?

Sample code
I have an element (most likely a div) that might be affeccted by the window size (or not). The user can pick any image as the div's background-image and I need to check if that image is too big and if it is I need to toggle on background-size: contain. I am not sure how to grab the size of the background image onload and how to compare that with the div. I think this requires a custom directive but I did not find any similar example.
On a sidenote, why does the image in the jsfiddle remain the same when the url is changed?

qx.ui.embed.Html scale to content

Is there a way to have the container containing an html widget (qx.ui.embed.Html) scale to the proper size so it doesn't cut off some of the Html?
Here's a playground example:
http://tinyurl.com/a4twfdc
Notice how the Three and Four get cut off.
The only way I could fix this was to define a minHeight and minWidth for the container, but my html can vary in size, so I end up with a large blank area or not enough room.
The only way I could think of a fix is to render the HTML prior into a helper div and take the offsetWidth / offsetHeight and apply it to the embed as well. That helper DIV could be out of the view port at e.g. -1000 / -1000 and you can set the HTML as innerHTML. Maybe that could solve your problem for the initial size. But as soon as the content of the embed changes dynamically, you have to redo the calculation if you can.

Resources