I have a very hard to explain CSS problem but I will try to make it as clear as possible:
In this codepen you see a window that opens on a browser viewport when user clicks a button on the main screen.
The width of this screen is defined by the max length of the customers data plus the max length of the dates and systems data. It also has a minwidth to make it not look ugly in any case. This works perfectly
The big problem is the height:
The total height of the window should normally be calc(100VH - 10%) which works good. So it depends on the browser height at the end. The title and footer height of the window are fixed.
The order number/status, customer and dates grid boxes have a fixed height. By now I have defined them as auto, so the divs inside the grid box define the needed height. But it could be a fix value for the height also if it is easier.
The contacts and communication boxes should spare the rest of the height.
For example:
Browser viewport height = 1100px => calculated window total height: 1000px; => Title and Footer each 50px, so we have 900px for the content.
We need 50px for the title box, and 350px for the customer/date box.
So we have 500px left.
Now the contact and the communication box should have 250px each.
The system box bottom should then be aligned to bottom of the contact box and the content of the system box should scroll vertically if needed. This does not work now.
If the tables in contact and/or communication contains not enough rows to fill the box, the table should still fill the box (It should not have only the height needed for the rows to display). This is the case at the moment. BUT! if the table contains more rows then it can show in the 250px it should not increase the height of the box (>250px), instead it should start to scroll the contents. That does not work.
At the end the tables show have a minimum height of around 3 rows.
If the height of the window gets too small to match the criteria it should start to scroll its whole contents. This works also
It sounds to me as though you will have to allow scrolling on all the individual elements unless the structure was changed and even then you’d probably still need most to scroll to match the rows.
I made some changes in the CSS at the bottom of the demo just to get an idea if this is working in the right direction. I tried to work with what you have rather than inventing something new.
I can’t really tell if it will work yet when you add more data as you are doing that dynamically. There also seems to be a glitch in the contacts table being shortened in width until the screen is resized which is probably down to the js not causing a reflow.
On the first glance on my iPad (I am already sitting on the couch the customer and dates box is scrolling now the content. That should not happen. They should always be high enough to hold the content.
The systems are correct now as I want them. I need to check what happens if I increase the number of rows in the tables tomorrow.
How does that fit in with your advanced pdf as you state that those 2 elements are a fixed height now? In my first example they were contained to a fix height with scrollbars appearing but you said they should always be tall enough to hold their content. That in essence means that they have to be auto height as per my last demo.
I made the contacts and communications be as high as needed but no bigger than a max-height. They could be made taller but then there would be blank space when there is only one entry line.
From your pdf it really looks like you have three main rows that you more or less want to be the same height. That means the rows could be set to something like 33% each and the content inside to the full height of the row.
There also seems to be a problem if you contain the tables to 250px height then gaps will appear as the row is no longer filled.
Lastly if you have more data in say communications than contact then their heights won’t match unless as mentioned before they are both set to something like 33% anyway.
I’ve put up a demo here with more rows added manually.
This is nearly perfect! Only the customer and dates boxes need fixed height to fit the content now.
The height of the customer and dates boxes is always fixed because it has always the same number of rows for the content. So the dates ar always this 10 dates and the customer has always Name, Address1, Address2, Zip/City and Country rows. Maybe this was not clear. So you can either give it a fix height or you can use auto. But you need to be sure that the height of these boxes are always great enough to hold this 5 rows (with the title 6 rows).
