React-Pdf Is not printed correctly even after using all elements provided by the Library - react-pdf

So I'm trying to build a mid-complex invoice for an app, but I'm having many problems getting the right layout printed, and I don't know the reason, I have tried some of the things.
So this is the design before I'm printing it (the React-pdf template):
So I want you to pay attention, to the items below that are iterated and printed. (Don't worry the logo will be shown on the print page, I don't know why is not showing by default on the design page).
And here is the template after the print, that the layout of items is broken, and it doesn't show the one I designed. But rather something else. Here it is:
Here is the live link to the React Pdf Editor, so you can check the code (because is to long for here):
React PDF Editor Online

Related

no template defined wordpress masterstudy

I'm trying to do the layout of a course on masterstudy in wordpress, but I'd like to make a template for certain parts of the course, lets say for example when I hover over the title, show an image, when I click on a paragraph, make another one appear next to it etc... I think it is possible to have shortcuts for these and not have to copy paste the code each time I want to have these effects. I think this icon(see image) might do the trick (not sure) but I can't seem to save a template in my dashboard. So if it is indeed this button, can you please explain me how to save templates, and if it is not the solution can you explain me where to look ? The screenshot shows the Tiny MCE editor
Thanks screenshot

View page breaks when emulating printing via DevTools

I'm attempting to perform some styling to handle page breaks when printing, to ensure my content does not get cut in half.
I know the styles requried to perform this (page-break-inside etc) but attempting to verify they work is a rather laborious task, especially when i can't query the DOM whilst its showing me the preview.
In Chrome (or any other browser for that matter) is it possible to put the page into print mode and have it render where the page breaks will be placed?
Currently i can use Dev tools to enable the print media queries, but the only way to see where the page breaks will take place is to actually bring up the print preview. However when thats up i can't interact with the DOM to see why elements do or don't get cut in half by the break.
When it all works this isn't really an issue but as we all know things tend to behave oddly more often than not!
Thanks

Why is Fancybox 3 adding style="display:none" to my elements?

I am upgrading from Fancybox-2 to Fancybox-3. My site uses fancybox to display blocks of HTML as an overlay on page. For instance, if you click on my Terms and Conditions, fancybox uses a file fb/tandc.php that has all the HTML of the box to be displayed.
Some of the boxes use data from my database and use php programming to generate the HTML - for instance I have a list of participants retrieved from the database.
When planning the upgrade, I added a switch on my site that allows me to decide if I want to run version 2 or 3 of fancybox. In testing, many of the boxes display the same whether I use version 2 or 3 - in other words I have not changed the source code, only the way I call fancybox.
My problem is that for some reason, some boxes do not display the full content. When I have checked the page source, everything is there but I have noticed that some elements have style="display:none" defined. This is not coming from my code, so I assume fancybox is adding it.
My question, therefore, is how can I stop this?
I have tried to find answers but not successful. I did find a post that disabling AdBlocker in Chrome may help but this had no impact.
I get the same behaviour in Chrome and FF
I have included screenshots that show how the elements contain the style; the code used to call fancybox; the options I am using.
page debug elements
call to fancybox
options used
Just added this screenshot of code to be displayed. I tried adding a style that I hoped would override what fancybox is doing, but did not work either.
code to be displayed in fancybox
This is how the content looks in v2 fancybox
content in version 2
and if I have exactly the same content, but use v3 fancybox:
exactly same content in version 3
Using ajax to load fancybox with content from a file seems to create elements where it inserts style="display:none" - I have no idea why. However, I figured a work around where instead I created inline content on the page that is hidden and then simply used data-src="#hiddenContent" as in the docs.
It's made my page huge though when I have a lot of surveys, with a lot of participants on each!

Exporting Visual Studio 2010 .rdlc report to PDF renders the font too large

I have a report that renders perfectly fine on screen, but when I export it to PDF one section is rendering the font HUGE, making it unreadable. The part that is getting rendered so big is a field I have set up to store rich text, which then gets converting to html. I did not roll this solution myself, but from what I understand it runs an rtftohtml method to render to the screen, and then it runs through the same method again to re-render it to a PDF, which is why I am confused. The first rendering (to the screen) looks perfect, and then the second rendering (to pdf) looks like garbage. I have seen a few threads on this topic in some other forums but not a single one has a response, so I am hoping the SO community has a possible work around or fix for this!

Reporting in Rich Text

I've built an ASP.net web application which allows the users to view and make notes on a list of calendar events. The notes are edited in a WYSIWYG editor that outputs to HTML text (but could also output to RTF), which is then saved as text in an MSSQL05 database.
Now I've got to add a printing function to the calendar application. Prior to this version, the printing was done through SSRS05, but now that I've added rich text notes, this method will no longer work.
I can render the whole calendar in a printer-friendly format in the web browser, but my users have two issues with that: first, I can't turn off the header and footer added during the print, and the users are a little too basic to understand how to turn it off themselves; and second, when a note gets too long, the text gets wrapped not-too-gracefully to the next page. Unfortunately, they use IE7, so the page-break-inside attribute isn't recognized, and upgrading to IE8 or using a different browser is out of the question (I already asked :P)
So with that information, what's the best way to generate a report which features rich text?
I suggest DataDynamics ActiveReports. Very powerful, lightyears ahead Crystal. Give it a try!

Resources