Challenges with View SDK

[ALB13]

Hi folks, was happy to find this capability this morning.  I was set up in a few minutes, and at first glance everything worked fine.

Until:

1. I tried to embed two PDFs on the same page.  I'm using a SIZED_CONTAINER and want to be able to have more than one PDF previewed on a page.  This doesn't seem to work, unless I'm missing something?
2. I tried to use it on mobile.  The size of the box is fine, but when I go full-screen (iOS.latest) something odd happens.  The 250x250 box that was previewing doesn't change size.  The content behind it does.  So, I'm stuck viewing full-screen content within a 250x250 window.

Appreciate a little help on what I'm doing wrong.  These things seem like they should be doable.  Thanks!

[Joel_Geraci]

Please share your code

[ALB13]

Hi Joel, it's a cut/paste from the custom embed configuration.

<div id="adobe-dc-view" style="height: 250px; width: 250px;"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
	document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
		var adobeDCView = 
        new AdobeDC.View({clientId: "<<ID>>", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "<<URL>>"}},
			metaData:{fileName: "<<NAME>>"}
		}, {embedMode: "SIZED_CONTAINER", showDownloadPDF: false, showPrintPDF: false});
	});
</script>

[Joel_Geraci]

I suspected as much. You need to have two different <div> IDs and two different variable names for the AdobeDC.View objects in order to display two Views in the same HTML page.

[ALB13]

Ok, that's helpful to know.  I'll test w/ that.

Any thoughts on #2?  That's kind of a show stopper.

[Joel_Geraci]

I'm not sure if you solved issue number one but if you haven't, I put up this CodePen to show you how to do it. It's pretty simple really.

[ALB13]

Here's a video example of the full-screen issue I'm having on mobile (item #2 above).  Works fine on desktop.

https://www.dropbox.com/s/ove29ittyw6s8li/video%20jul%2002%2C%208%2013%2007%20am.mp4?dl=0

As you can see it works fine with the 250px square.  But when you full-screen it does odd things.  And, no way to get out of full screen mode.

Appreciate some guidance here.

[Suren P]

Thanks for sharing the video, unfortunatley we are not able to replicate the issue #2 with the details shared. It would be really great if you can share the hosted html(or the complete html content) so that we can debug it further 

[ALB13]

Hey SurenP, thanks for the note.

Some updates to what I'm seeing:

• Chrome web - works great.
• Chrome on iOS - works fine, minus that I can't seem to exit out of full-screen mode.
• Safari web + iOS - Strange behavior, similar to what is shown in video.

Here's where you can see it in action:

https://platform.sandiegovp.com/version-test/adobe

THANKS for the help!

[Suren P]

Thanks for sharing the details, looks like the hud is getting hidden beneath the toolbar - it will be visible if you hide the toolbar as shown in this recording - please check.

[ALB13]

Hey there,

I appreciate the note.  The problem is, no user is going to know to do that.  They will just get stuck and frustrated. 

It appears that there is a gap at the top...why is full-screen not rendering starting at the top of the browser frame?  Seems like if that gap were gone, it would work perfectly.

[Joel_Geraci]

Do you have a CSS resetter in your code? Can you share full site code?

[ALB13]

Hey Joel,

I do not have a resetter.  I'm using a no-code platform to build upon, so not much I can share beyond the link I don't think.

[Joel_Geraci]

I'm 90% sure this is a CSS issue in the parent element. The HTML its rendering is taller than my phone screen which is why the nav bar is offscreen. You can see it if you scroll. I'm looking at the HTML now to confirm.

[Joel_Geraci]

One of your container elements has a 32px margin at the top. I think that's what's throwing it off. The page height is set to be the exact height of the device resolution but that margin is causing the page to be longer than what can be displayed on the screen. Also, I think, though I am not certain, that View SDK is not taking into account the application chrome and is trying to render to the full device resolution which is what it does with desktop browsers. 

[ALB13]

Sure.  The preview version of the element could live anywhere on a page.  It could be 3 page scrolls down.  That distance shouldn't matter when going full screen should it?

[Joel_Geraci]

Yeah - Now that I dig deeper, I don't think the margin should matter. I think this is caused by a bug.

[ALB13]

Thanks Joel.  So what is the procedure moving forward then?  How do bugs get submitted, accepted, resolved, etc?  Would really like to be able to use this but for now I'm unable to. 

I also see the online demo seems to work on mobile, not sure why that's different than mine?

[Suren P]

Thanks for your patience, no further action required from your end - we have taken a note of this issue and will let you know once the fix is available.