Hello,
I am new on this but I find it a fantastic tool that I want to leverage more. I have come up with a problem that I hope someone may have a solution, from a configuration setup, or something else.
I have setup a webpage monitor that picks up a pdf that is in HTML version to review and see if any changes have occurred on the doc. I have made it work with macros and cloud to select the information and the whole document and it has flagged certain changes but I am having trouble loading the side by side viewer when its in:
Styled page
Visual
It will not show me anything on the page for the visuals (the html version of the pdf doc has multiple pages). I am noticing that when it first opens it tries to open the whole thing but then it leaves me with only a single part of the document, not allowing me to scroll. I can review it as text and code and “unstyled” but its messy to review and a clear side by side/styled/visual view is the ideal that I would need. any feedback on what to do? any setup for browser or anything else? I tried Edge, Chrome, Firefox, all same result.
Any ideas or help would be greatly appreciated.
Thanks,
AA
Hello @armian10, welcome to the community forum and reaching out!
From what I understand, you are able to view the changes in text mode. But the visual mode is unable to show full content. Will you be able to share the page’s or PDF’s URL? I can then check it out and see what the issue could be.
Hello Ajit!
Thank you for your prompt reply. You are correct, it doesn’t show the visual changes, it just remains blank when I select visual (it actually flickers for less than a second and then disappears leaving a blank screen as in the first screenshot below). Unfortunately I cannot share the URL as it is behind a paywall and run macros to get to it.
I can share a screen shot of what it looks like:
It looks like there are some stylesheet rule in the page that is hiding the element. The browser’s “Inspect Element” feature can be used to figure it out. Here’s a quick guide to inspect the elements:
Right-click on the element that is closest to the hidden element
Choose “Inspect” from the menu
The browser’s Developer Tools will pop up. This shows you the HTML and CSS for the selected element.
The hidden elements should also be visible in the inspector. Try to select that in the Elements panel.
In the CSS section, keep an eye out for styles that might be hiding the element or messing with how it’s displayed. Some properties to look for include display, visibility, and opacity.
By looking at the element’s styles, you should be able to figure out why it is hidden. Once we are able to figure that out, the next step will be to make it visible.
On a related note, it looks like you are trying to monitor the full page. Have you tried monitoring a smaller part of the page instead?
Hello Ajit,
Thank you so much for your help and going through it. I used your steps but I am still unsure of what to do.
I agree, I am looking at the entire page (it’s a PDF so I want to review the entire document to see what changes were made everytime something is updated) but I was able to see that each page has it’s unique information. The issue is that I am unsure how to track each change page. I can see some of the information, but unsure how it’s setup or how to change it to track it appropriately. Here is a screenshot from a single page and what I can see a certain parameters as “Display: blocked” unsure what this means.
Here is an image of the element inspector to view an invisible element. Notice how the style of the invisible element is display: none. display: block is a normal style that doesn’t hide an element.
Is this image from the webpage displaying the PDF’s HTML version? Can you try inspecting the element in the “explore diff” view instead? This can tell us why the element not when looking at the changes.
Tip: Firefox’s element should show the invisible elements in gray color.
BTW, do you have access to the PDF’s url that could be monitored directly for changes? Although Distill’s PDF monitor does not render the images by default which could be an issue.
This is great, thank you for the tips. I can see that the “styled Page” for the element I’m viewing has nothing on the element.style, its just blank (see image below).
While if I toggle on the “Unstyled Page” it does have a display:block; on it;
As for the PDF URL, unfortunately not, there is a link to a URL but it’s dynamically generated and not always the same so cannot send link to the PDF tool…
Thank you again for the help, and any ideas on what to do, or how to set it up to see those changes, would be greatly appreciated!
Andres
Hey Ajit,
I’ve kept playing with it and I found something that made it work! (partially):
If I change the “height” in the element I can finally see the entire section, how would I make it so that this element is always showing the entire height of the document?? I’ve tried multiple options (auto, fit-content, etc) but I have to define a value on there to show everything. Anyway to make it adjust automatically for the entire set of pages?
Also, noticed that the text format is completely not what it is supposed to be, it’s not matching what the document has. I do notice it’s tracking the changes, but hard to tell with the weird text sizes.
Thats a good find. It was an entirely different style that was causing it!
Distill computes the height of the content and sets that as the height of the iframe. In this case, it computed the height to be a very small height. This can happen if some of the stylesheets from the webpage did not load. This could also explain why the text sizes are messed up. Let me look into it next week and get back to you. Thanks!
