REMOVE SCROLL BARS

  • 1
  • Question
  • Updated 1 year ago
  • Answered
Is there any way I can remove scroll bars from my display?  I know they are showing because the HTML widget is bigger than my placeholder.  But, I would like to be able to control what shows with my placeholder size.  Here is my preview link:  http://preview.risevision.com/?type=presentation&id=01dca36e-6323-46b4-bc62-e5500eaa8b68
Photo of Eric Padget

Eric Padget

  • 402 Points 250 badge 2x thumb

Posted 1 year ago

  • 1
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Eric, if it is iframe you are using, then add scrolling="no" attribute to it. Alternativelly, you can put iframe inside <div> container and add CSS style attribute overflow: hidden; .
Photo of Eric Padget

Eric Padget

  • 402 Points 250 badge 2x thumb
I've tried that but I'm not a coder by any means.  I probably did it wrong.  Would you mind taking a look at my iframe code:

<iframe src="https://docs.google.com/presentation/d/1V8k-Che7WeouMA04ZxYPiTEwhK-LWbdBiLvOLhqIV4s/embed?start=true...; frameborder="0" width="640" height="540" allowfullscreen="false" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

Where would I put the scrolling="no" attribute?
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
<iframe src="https://docs.google.com/presentation/d/1V8k-Che7WeouMA04ZxYPiTEwhK-LWbdBiLvOLhqIV4s/embed?start=true...; frameborder="0" width="640" height="540" allowfullscreen="false" mozallowfullscreen="true" webkitallowfullscreen="true" scrolling="no"></iframe>
Photo of Linda Biehl

Linda Biehl

  • 94 Points 75 badge 2x thumb
I put a picture frame around my google slide presentation.  I created it in HTML.

<html>
<head lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<iframe style="border: 22px solid #000000;" width="754" height="458"  frameborder="0" allowfullscreen></iframe>
</body>
</html>

You can change the width and height to meet your needs.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
For Google Slides I used a bit more sophisticated solution. I put iframe in a <div> placeholder that is actually a couple of pixels smaller then slides. Then in <style> I reduced the margins by -2px top and bottom, and I also hid overflow. Came out perfect. The size of slides is 644x724 px. Now look at the HTML widget's code I used... you can figure that out:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google Slides</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#container {
height: 722px;
width: 642px;
overflow: hidden;
position: absolute;
margin-top: -2px;
margin-left: -2px;
}
</style>
</head>

<body>
<div id="container">
<iframe src="https://docs.google.com/presentation/d/1TJ_yJ0-R3juzTVsr6mQiJ_LCZ-NoJvp9T9WP6d4E7ec/embed?start=true...; frameborder="0" width="644" height="753" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
</body>
</html>

Preview: http://preview.risevision.com/?type=presentation&id=62b2f4c6-8a9b-4730-8ceb-c2f5c356bbf9
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
I think this is the only way available in HTML to hide scroll bars because scrolling="no" does not work with Google Slides as far as I can remember.