Highlighted

Challenges with View SDK

New Here ,
Jun 22, 2020

Copy link to clipboard

Copied

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!

Topics

View SDK

Views

273

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Challenges with View SDK

New Here ,
Jun 22, 2020

Copy link to clipboard

Copied

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!

Topics

View SDK

Views

274

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 22, 2020 0
Adobe Community Professional ,
Jun 22, 2020

Copy link to clipboard

Copied

Please share your code

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 22, 2020 0
New Here ,
Jun 22, 2020

Copy link to clipboard

Copied

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>

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 22, 2020 0
Adobe Community Professional ,
Jun 23, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 23, 2020 0
New Here ,
Jun 30, 2020

Copy link to clipboard

Copied

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

 

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 30, 2020 0
Adobe Community Professional ,
Jul 07, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 07, 2020 0
New Here ,
Jul 02, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 02, 2020 0
Adobe Employee ,
Jul 07, 2020

Copy link to clipboard

Copied

 

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 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 07, 2020 0
New Here ,
Jul 07, 2020

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 07, 2020 0
Adobe Employee ,
Jul 07, 2020

Copy link to clipboard

Copied

 

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 07, 2020 0
New Here ,
Jul 07, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 07, 2020 0
Adobe Community Professional ,
Jul 07, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 07, 2020 0
New Here ,
Jul 07, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 07, 2020 0
Adobe Community Professional ,
Jul 07, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 07, 2020 0
Adobe Community Professional ,
Jul 07, 2020

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 07, 2020 0
New Here ,
Jul 07, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 07, 2020 0
Adobe Community Professional ,
Jul 09, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2020 0
New Here ,
Jul 09, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2020 0
SurenP LATEST
Adobe Employee ,
Jul 09, 2020

Copy link to clipboard

Copied

 

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2020 1