Ace: Scrollbar covers last line in editor

Created on 19 Dec 2018 · 3Comments · Source: ajaxorg/ace

Hi there, is it somehow possible to place scrollbar out of the editor textarea so it will not cover the last line of the content?
screen shot 2018-12-19 at 14 41 31

Source

ketysek

Most helpful comment

You can even see the problem on Ace homepage(chrome/ff/safari on a mac, image is from here: https://ace.c9.io/)

Seems like scrollbars are usually autohiding on a mac, and this problem does indeed occur with a plain . Neither the workaround or the padding-bottom on .ace-editor worked for me (though padding-bottom does work for <textarea> so might just be my specific css setup), but using <code>setScrollMargin</code> did do the trick for me:</p> <p><code>editor.renderer.setScrollMargin(0, 10, 0, 10)</code></p> <p>and I'm using react-ace, so solution was from here: <a rel="nofollow noopener" target="_blank" href="https://github.com/securingsincity/react-ace/issues/386">https://github.com/securingsincity/react-ace/issues/386</a></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/1245838?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture"> <strong>brandonburr</strong> <span class="text-muted ml-1">on 18 May 2020</span> </div> <div class="col text-right"> 🚀<span class="ml-2 mr-3">3</span> 👍<span class="ml-2 mr-3">3</span> 🎉<span class="ml-2 mr-3">2</span> ❤<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> </div> <div class="col-12"> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="9295564578" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="col-12 d-flex align-items-center mb-4"> <h2>All 3 comments</h2> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Is the scrollbar autohiding, and is the behavior the same for textarea?</p> <p>If yes, then a workaround for this is to use:</p> <pre><code class="prettyprint">dom = require("ace/lib/dom") dom.scrollbarWidth_orig = dom.scrollbarWidth_orig || dom.scrollbarWidth dom.scrollbarWidth = function(doc) { return Math.max(10, dom.scrollbarWidth_orig(doc)) } </code></pre> <p>if no, then this is a bug. On which browser and os do you see it?</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/341801?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="nightwing picture"> <strong>nightwing</strong> <span class="text-muted ml-1">on 24 Dec 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I've added padding-bottom to .ace-editor ;) but if you're curious, it happens on OS X Mojave, in Chrome & also FF</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/11921885?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ketysek picture"> <strong>ketysek</strong> <span class="text-muted ml-1">on 4 Jan 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><img loading="lazy" src="https://user-images.githubusercontent.com/1245838/82249845-59dd9e00-98ff-11ea-95a4-a186bc46246f.png" alt="image" /></p> <p>You can even see the problem on Ace homepage(chrome/ff/safari on a mac, image is from here: https://ace.c9.io/)</p> <p>Seems like scrollbars are usually autohiding on a mac, and this problem does indeed occur with a plain <textarea>. Neither the workaround or the padding-bottom on .ace-editor worked for me (though padding-bottom does work for <textarea> so might just be my specific css setup), but using <code>setScrollMargin</code> did do the trick for me:</p> <p><code>editor.renderer.setScrollMargin(0, 10, 0, 10)</code></p> <p>and I'm using react-ace, so solution was from here: <a rel="nofollow noopener" target="_blank" href="https://github.com/securingsincity/react-ace/issues/386">https://github.com/securingsincity/react-ace/issues/386</a></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/1245838?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="brandonburr picture"> <strong>brandonburr</strong> <span class="text-muted ml-1">on 18 May 2020</span> </div> <div class="col text-right"> 🚀<span class="ml-2 mr-3">3</span> 👍<span class="ml-2 mr-3">3</span> 🎉<span class="ml-2 mr-3">2</span> ❤<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(392616428, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(392616428, 1);" onclick="rate(392616428, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(392616428, 2);" onclick="rate(392616428, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(392616428, 3);" onclick="rate(392616428, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(392616428, 4);" onclick="rate(392616428, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(392616428, 5);" onclick="rate(392616428, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/ace/94838253/is-there-a-way-to-disable-indented-wrapping-in-mode-html-and">Is there a way to disable indented wrapping in mode-html and derived modes?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/1374013?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="RickStrahl picture"> <strong class="pr-1" dir="ltr">RickStrahl</strong> · <span class="px-1" dir="ltr">5</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/ace/42034044/ace-marker-at-wrong-position">Ace Marker at wrong position</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/4619513?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="BoasE picture"> <strong class="pr-1" dir="ltr">BoasE</strong> · <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/ace/204789077/autocomplete-popup-container-option">autoComplete popup container option</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/4101480?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="mafar picture"> <strong class="pr-1" dir="ltr">mafar</strong> · <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/ace/184183971/language-server-protocol-integration">Language Server Protocol Integration</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/3082655?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="akosyakov picture"> <strong class="pr-1" dir="ltr">akosyakov</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/ace/59191649/vim-mode-substitution-find-and-replace">vim mode substitution (find and replace)</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/151913?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="gsf picture"> <strong class="pr-1" dir="ltr">gsf</strong> · <span class="px-1" dir="ltr">6</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/ajaxorg/ace/issues/3856" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2025 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>