Question 44877 in Html Question posted in
Some basic documentation can be found here.

How to remove the scroll bar from an embed image in Google site, html

I am doing a website for a dental clinic and I want to make a image slider comparison. I did it with juxtaposeJS.knightlab.com and embed the code in my Google site, but I don’t know how to remove the scroll bar despite I have adjusted its height. Also, it loos horrible in mobile preview.

the image is a screenshot of how it looks in preview mode

This is the html code:

<iframe frameborder="0" class="juxtapose" width="100%" height="332"
<iframe src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=c9bdf8aa-b4bd-11ed-b5bd-6595d9b17862"></iframe>

I tried Googling for other solutions I found here and on other websites but it’s either the scroll bar remains there or the image disappeared after editing the HTML code.

Tags:

2

Answers


  1. 0

    Just add scrolling="no" in the second iframe:

    <iframe frameborder="0" class="juxtapose" width="100%" height="332"> </iframe>
<iframe scrolling="no" src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=c9bdf8aa-b4bd-11ed-b5bd-6595d9b17862"></iframe>
    Login or Signup to reply.
  2. 0

    The code provided in the original question is not legitimate HTML, which I suspect is most of the issue. The easiest way to fix this is probably just to give the iframe a height that is sufficient for the contained content, like this:

    <iframe src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=c9bdf8aa-b4bd-11ed-b5bd-6595d9b17862" frameborder="0" height="183"></iframe>

    By default, iframes have a height of 150px, and since the image you are embedding has a hard-coded height of 183px, you are getting a scrollbar.

    Alternatively, you could opt for a more dynamic JS solution, such as the one presented in this question

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search