Hello,
Every time I embed a snippet, I get this unnecessary vertical scroll bar:
You can test it yourself here: HTML And Script Code Tester and entering the embed code: <script src="https://gitlab.com/embeddeddevops/blog/-/snippets/2129124.js"></script>
How can I get rid of this scroll bar.
Viewing your snippet normally via the Gitlab link: factorial ($2129124) · Snippets · Embedded Devops / Blog · GitLab
looks OK to me. I didn’t click and paste your link to some rendering website, since it’s not the same as what you have posted in your snippet. I checked the code first to make sure I wasn’t going to run something dangerous. If you wish to post links to show something that appears on gitlab then you should post exactly where the problem exists, and not ask people to run code via their browser as I deem that a security risk.
Since your screenshot shows Gitlab, then you should be posting the link to Gitlab there, rather than some rendering site which isn’t the same.
looks ok meaning you dont see a scroll bar?
i dont understand the rest of your reply. the problem is with embedding snippets so you need to embed it somewhere to see the problem. You can trust it because the script is generated by GitLab, not me. I posted a simple snippet you can test and a website you can simply test it.
From the link to your snippet on gitlab (the link i posted) it doesnt show a scrollbar. Unless you are talking about when you view the rendered version of your code.
You can use codepen as a resource for dropping in js and css then just link the codepen. Saves having to manually copying and pasting the js link into a rendering website. People can then also contribute to your codepen to potentially fix issues. So also a bonus.
now i understand. yes i am talking about how it looks when you embed the snippet not how it looks on the gitlab page.
here is the JSFiddle that shows the problem:
To be honest, I think it’s a jsfiddle thing. Irrespective of how much code is in the snippet, it still shows the scrollbar.
I decided to create a 4 line snippet, and it still showed the scrollbar. I tried also a longer one of 20 lines, the same.
So not a fault of Gitlab, or your code - just the fault of the site that is actually displaying the results and always displaying the scrollbar.
You can open the console in Chrome and paste the content if that JS file that you linked and then run it. It loads fine, and doesn’t show a scrollbar.
on the right-hand side the red text is the contents of the JS link to your snippet.
With respect, i dont think this has anything to do with jsfiddle. if you put the embed code in any online renderer, it will show you the scroll bar.
https://codebeautify.org/htmlviewer
https://htmledit.squarefree.com/
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
https://jsonformatter.org/html-viewer
if you create this simple html file:
<HTML>
<script src="https://gitlab.com/embeddeddevops/blog/-/snippets/2129124.js"></script>
</HTML>
and open it in any browser, you’ll see the scroll bar
I was able to get it to display properly by modifying the height attribute (unchecked height: 100%) on the <pre> tag
this makes it seem like a GitLab bug. I can’t modify it via css when embedding because of browser security restrictions
thanks.
created a bug report and merge request here: Embedded Snippet shows Vertical Scroll Bar (#332379) · Issues · GitLab.org / GitLab · GitLab
awesome !
MR has been merged to master and deployed. Scroll bar gone!
