8px margin in HTML widget?

  • 2
  • Question
  • Updated 2 years ago
  • Answered
I'm embedding google slides in an HTML Widget, using the new editor. I just noticed I have an 8px margin around the entire placeholder! I've tried everything I can think of to get rid of the margin: checking the raw HTML, everything has "margin:0" in the body tags, the placeholder is fullscreen and set to top left, etc. Still a persistent 8px margin, which causes scrollbars to pop up.

This does NOT happen with the Web Page Widget, only the HTML Widget.  And weirdly, I don't think it used to happen at all. Any clues?
Photo of Jennifer Smith

Jennifer Smith

  • 200 Points 100 badge 2x thumb

Posted 3 years ago

  • 2
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Jennifer,
I am looking to see if I can recreate this using one of the HTML Widgets that is in your account. There is a presentation called 'new editor - slideshows' so I am assuming it's in this?

In the new Editor, I've created a HTML Widget and embedding the code from 'hs monday breakfast'. I can see the scrollbars. I've changed the HTML Widget playlist properties to width="960" height="569" (to match the width and height in the code) and can see the scrollbars. I've changed the properties again but adding further buffer, so width="979" height="588" which resulted in no scrollbars. I am wondering if you are able to change the width/height of the playlist and if so, are you able to also see the scrollbar?

Looking at the classic Editor/RVA, I notice in the Placeholder containing the embedded HTML widgets that the width is 1000 and height is 600 so this adds plenty of space for the embedded HTML widgets.

The reason why this doesn't happen with the Web Page Widget is that you are only restricted to adding the URL itself - so in the code for the HTML Widget there are further properties that details the size of the Slides:
<iframe src="LinkToGoogleDoc" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
(Edited)
Photo of Jennifer Smith

Jennifer Smith

  • 200 Points 100 badge 2x thumb
Look at the presentation named "HS menu schedules", please. Everything should be 1920x1080 to match our display (fullscreen).
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Hi Jennifer
Thanks for sending the presentation name. I can recreate the issue that you are seeing regarding the px surrounding the HTML widget despite doing tweaks to the width/height. I can also see that this does not happen to the Web Page Widget. I'll log an issue about this and send to the team. If you require a presentation without that buffer it looks like the Web Page Widget is the option to choose from.

Thanks for taking the time in sending this through,
Hannah
Photo of Steps

Steps

  • 192 Points 100 badge 2x thumb
I am also having this issue and never had this issue before. I converted all my HTML Gadgets to Widgets. I'm embedding a Google Drawing. Now, there are scrollbars present. Let me know the best way to fix this. Thank you!
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Steps, could you send through a link to the presentation?
Photo of Keith Streeter

Keith Streeter

  • 74 Points
I have experienced this happening as well with an existing functioning presentation.  It used to display fine as four google slides in quadrants, no scroll bars.  Then is started to add the bars.  I checked every slide for errors, then I rebuilt a presentation from scratch with blank slides.  The scroll bars persisted.  At the moment I have managed to put them off by oversizing the presentation area slightly even though it should remain at 1920x1080.  Previously it worked perfectly.  It seems like a change to either the widget or the underlying system code causing the conflict.  I can provide my code and presentation.
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Keith, could you send through a link to the presentation?
Photo of Brent Haage

Brent Haage

  • 60 Points
I changed the default body tag to: <body style="margin:0; overflow:hidden;"> and it seems to work for me.
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Hi all,

The body tag has a margin by default. In order to get rid of it, please add the following CSS between the <head> tags within the HTML widget :

<style>body { margin: 0; }</style>
Photo of Jennifer Smith

Jennifer Smith

  • 200 Points 100 badge 2x thumb
Changing the body style to "margin:0" was mentioned in the original post, and at least didn't use to work (I haven't tested it lately). I didn't try overflow:hidden, though, and that may do the trick. 
Photo of Jeremy Klammer

Jeremy Klammer

  • 688 Points 500 badge 2x thumb
Is there anything more to removing the scrollbars? Adding the body / head tags did not solve it for me. I still see a margin around the placeholder in my preview which causes the scroll bars. Pretty consistently I will embed a Google Slide or a YouTube video in Rise Vision. Does anyone have suggestions making these full screen (1920:1080), filling the entire screen, and avoiding scroll bars?
Thanks! Jeremy
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Hi Jeremy,
If it is a grey navigation bar, you can add this at the end of the link: &rm=minimal&slide=id.p

I have seen a couple of presentations use a transparent-centre image frame effect. There is a write up about this at https://community.risevision.com/rise...

Getting Google Slides to show without the frame seem to require a bit of wrangling.

For a Google Slide presentation that is 1280x749, I used the code in the Embed tab and added the code via the HTML Widget in a Placeholder that is 1280x707.

In the HTML, I added the following in the <head></head> tags:
<style>body { margin: -20px; }</style>

The margins that you see seems to be part of Google Slides, so I had to set a negative margin to take it out.

This is the result that I had:

(Edited)
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
I am just gonna post how I play Google Slides without this sort of issues.
Size of slides: 1080X603

I am using the Web page Widget. For that I created basic custom web page and placed it in my RV storage. The page has only one <div> container with EMBEDDED Google Slides code. This is <style> markup for the page:
body { margin-left: 0px; (removes all the margins)
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#container {
height: 574px; (IMPORTANT - hides Google Slides label at the bottom; see the size of slides)
width: 1080px;
overflow: hidden; (removes scrollbars)
position: absolute; (makes sure your content is where it is suppose to be)
}

All this could be done using the HTML Widget, but I prefer, if needed, editing external web pages instead of RV presentations.
Photo of Jeremy Klammer

Jeremy Klammer

  • 688 Points 500 badge 2x thumb
Thanks for the helpful insigghts, Darius and Hannah. After playing around, this was my preferred solution.

Google Slides:
We often use Google Slides when showing images. On inital slide setup, I change the Google Slide dimensions to 1920px x 1080px. The default is "Widescreen 16:9" which is 960px x 540px. This is changed in File > Page Setup... > Custom. You can pic whatever dimensions you want upfront - but note that this is not necessary. You can leave the dimensions in Google at 960x540 and they can be scaled up to 1920x1080 when you embed it into Rise Vision. 

I then get the embed iframe code from File > Publish to the web... You will need to determine if you want the slides to start and if so, the timing and if it will loop. We do both depending on the situation.
The embed iframe code will output as 1920px x 1109px. The extra (1109-1080 =) 29px are for the controls row at the bottom of the Slide. 

Rise Vision HTML Widget:
In Rise Vision, I create a new 1920x1080 presentation and insert an HTML Widget. There are four unique changes I make for the presentation to display without scrollbars or margins. Here they are:
  1. HTML Widget Placeholder Dimensions set to 1940px x 1100px. If you keep the placeholder at 1920x1080, there will be scrollbars. I think this new HTML Widget makes scrollbars if the content in the placeholder is close to the placeholder dimensions. It is trying to be helpful so you can view the entire content, but for this purpose we dont want it. So we make the placeholder large enough that scrollbars don't show up.
  2. Insert 0px margin in the HTML Widget head tags. In the Widget head tags, I insert the following code:  <style>body { margin: 0px; }</style>  This is because there is some margin around the slide in this widget. Curiously, there is not the same problem with the older HTML Item. I do know why - I just know this is the solution that works for me.
  3. Inside the iframe embed code, at the end of the src="URL", I insert &rm=minimal. This removes the 29px of controls at the bottom of the slide. This stackover page is a good resource for more parameters on Google Docs: http://stackoverflow.com/questions/23446449/google-sheet-embed-url-documentation
  4. Inside the iframe embed code, change the height from 1109px to 1080px. Because we removed the 29px controls with "rm=minimal" in the last step - the slide should only be 1080px tall. 

Summary
With those 4 changes, I am seeing a fullscreen, no margin, no scrollbars, no nonsense view of the Google Slide

Post Script
Note: I can also use the older HTML Item - I simply copy/paste the iframe embed code and do not need to do anything else and it shows up just fine. A little easier. The only problem: If I have an animation in the slide that I want to initiate each time the slide plays, it does not work with older HTML Item. HTML Widget inities animation each time. However, I see a "loading..." screen briefly. Anyone know how to remove that...?


Cheers
Jeremy