0

I am wondering if it is possible to determine if the content stored inside of a variable will exceed the bounds of a container element that is yet to be created.

I have a bunch of data that a user can select from, to print out. A function will format/style the data into a string variable

myDataVariable = "<div class='container'>content 1</div>"
+"<div class='container'>content 2</div>"
+"<div class='container'>content 3</div>"
+". . .";

and it takes that variable and opens it in a new window so we can print/save it as a pdf.

myWindow = window.open("","_blank", "width=800,height=750");
myWindow.document.write(myDataVariable);

What I am finding is the content fits perfectly for some bits, but others are just too large and they overflow the container div's bounds. The bounds are statically set to allow for up to 9 containers per page (if you print it). I want to know if I could determine the size of the content and if it exceeds the bounds, so I can make a 2nd container div (or a 3rd, or 4th, etc.) to hold all of the overflow. If I could create a new element for this I could then create a header for the content ("Content X" cont. [2/3], or "Content Y" cont. [3/7], etc etc).

I'm not finding a lot of answers on Google or here, so am I stuck just creating the content on my main page on sort of a hidden element, doing the calculations there, and passing the results to the new printable page?

Thank you!

Bonte
  • 9
  • 3
  • 6
  • This should be possible to do with just pure CSS, no need for the JS. If you can share the rest of your code, that'd help us write an answer. But it's probably going to be using flexbox, and flex wrap to make use of available space – Alicia Sykes Jan 30 '23 at 15:07
  • @Lissy93 Thanks for the reply! The code I posted is, at its core, exactly what I'm doing right now. The only difference is the actual content. Can flexbox's create new elements if there is overflow? I am searching online right now and I'm not getting a definitive answer. – Bonte Jan 30 '23 at 17:22
  • You don't need to create new elements, all the overflow capabilities should be able to be handled with proper CSS. – Alicia Sykes Jan 30 '23 at 23:56
  • I think that this may help you... https://stackoverflow.com/questions/143815/determine-if-an-html-elements-content-overflows – GeneralBear Jan 31 '23 at 13:45

0 Answers0