Visual Selector issue when comparing "styled" and "visual" on html pages

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.

1 Like

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.

Thanks, Ajit

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:

Any help would be appreciated.

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:

  1. Right-click on the element that is closest to the hidden element
  2. Choose “Inspect” from the menu
  3. The browser’s Developer Tools will pop up. This shows you the HTML and CSS for the selected element.
  4. The hidden elements should also be visible in the inspector. Try to select that in the Elements panel.
  5. 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.

Any ideas?
Thank you again! such a great help!

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, 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!

Hey Ajit,
I’ve kept playing with it and I found something that made it work! (partially):

  1. 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?

  2. 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.

Any ideas??

Thanks again!

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!

Hello Ajit,
I just wanted to follow-up on this conversation. Any suggestions or solutions regarding this thread? this would be very useful for me as I use this regularly and having to do this adjustment for the height in order to view anything for comparison.
Any help and/or suggestions would be welcome.

1 Like

Thanks for following up @armian10. We have a fix in the works. It may take another day or two finetune and push to production. Will let you know once it is deployed.

Fantastic! Thank you for the update. Looking forward to seeing it!

It deployed now @armian10. Can you try reloading the Watchlist and see if you can view the changes in “explore diff” page?

This is great Ajit! I’m looking through it and see that it works! I’ll keep playing around with it and give you any additional feedback as I continually use it.
A couple of things that have come to mind that may be of use to me as well as other clients, but maybe not part of this particular conversation would be:
Interval timing and staggering - How do I setup specific times for checks to happen (like at 8 am every morning and stagger the checks as a single login maybe used to login to check a website)
Removing or Flagging Sieves to not compare - sometimes there maybe some false positives for sieves when they are checked, I would like to be able to eliminate certain sieves from the history, or flag it as one that failed) - Maybe one could set tolerance levels of changes, if More than 90%, probably something failed on page completley. I am looking for changes for maybe 10-20 % of the page. Just some thoughts.
Crawler make hyperlinks for new web pages - I would like to have hyperlinks directly from the list of hyperlinks that appear on the change log, I have to copy and paste them on a particular webpage to go to site, it would just make it easier.
I hope this helps.
Thanks again,

1 Like

I was able to check and I think it now loads properly the height and can check a side by side which is great! But only on the webpage, not on the extension, FYI!

Another thing to check is Formats not loading:
I have also noticed that on some webpages (the ones that I am comparing PDF’s on a side by side basis) the fonts are still not good and makes the comparison’s difficult to impossible. When it compares to a page that failed (sieve that came blank) the format looks good on the one that loaded, but when there is comparison to be made, it looks way off. Examples below.

  1. Messed up comparison of text formats:
  2. OK comparison with failed to load Sieve:

Any help or news on this would be helpful!

Thanks for pointing this out. I should have mentioned that. The update has so far only been deployed on the webapp. The extensions usually get the updates after a week or two.

The challenge in some cases is the stylesheet used by the webpage. When they try to layout content, and added to deleted content can be misplaced. In those cases, remove page’s styles or using text mode can help. We will check if it is feasible to fix this.