How can I prevent horizontal scrollbars from showing on my floating div?

overflow scroll not working
overflow-y overlay
overflow: hidden not working
how to remove horizontal scrollbar in bootstrap
css overflow-y
css always show horizontal scrollbar
div scrollbar
css overflow-y scroll to bottom

I have created a left-side menu that expands on mouse enter. This works, but I have one minor issue: Is there a way / How can I stop the horizontal scrollbar from showing at the bottom of the left panel?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
  #leftpanel {
    left: 0;
    width: 100px;
    overflow: auto;
    height: 100%;
    background: gray;
    border: 2px solid black;
    position: fixed;
    z-index:100;
  }
  #centerPanel {
    top: 0px;
    position: relative;
    left: 100px;
    height: 600px;
    width:calc(100% - 100px);
    background: yellow
  }
</style>

<script>
$(function() {
//  alert("ready");
  $("#leftpanel").mouseenter(function() {
    var rect = document.getElementById("tbl").getBoundingClientRect();
    var wid = (rect.left + rect.width);
    var css = {};
    css.width = wid;
    $(this).animate(css, "slow");
  });
  $("#leftpanel").mouseleave(function() {
    $(this).animate({width: "100px"}, "slow");
  });
});
</script>

</head>
<body>
<div id="leftpanel"><table id="tbl"><tr><td style="white-space: nowrap">This is some longerish text using this as an example</td></tr></table></div>
<div id="centerPanel"><a href="">Foo</a></div>
</body>
</html>

Short answer:

change

overflow: auto;

to

overflow: hidden;

From the Docs:

auto: [...] Desktop browsers provide scrollbars if content overflows.

hidden: Content is clipped if necessary to fit the padding box. No scrollbars are provided.

The CSS Overflow Property, Setting the overflow value of a box to scroll will hide the content from Of note with this value is that you get BOTH horizontal and vertical scrollbars no Setting overflow doesn't clear the float at the element, it self-clears. CodePen is a place to experiment, debug, and show off your HTML, CSS, and JavaScript creations. As that would hide any vertical scroll. Actually, in order to fix that little issue, say overflow-x hidden and overflow-y auto in that order. As long as Opera is still happy, that's probably going to be the easiest fix. There is also some opera only js you can track down. But that's not a clean fix.

In #leftpanel, make overflow as hidden instead of auto

#leftpanel {
  left: 0;
  width: 100px;
  overflow: hidden;
  height: 100%;
  background: gray;
  border: 2px solid black;
  position: fixed;
  z-index:100;
}

Visit https://jsfiddle.net/w7652rzx/

overflow, Setting the overflow value of a box to scroll will hide the content from rendering The scrollbars will only show up if there is content that actually breaks out of the element. For example in the demo below the horizontal overflow can be Setting overflow doesn't clear the float at the element, it self-clears. Hidden Horizontal Overflow. Sometimes horizontal overflow is more elusive. Like when it doesn’t trigger a horizontal scrollbar, but you can still expose the overflow by swiping with a touchpad or select-and-dragging. I’ve made a basic demo of that scenario, see this GIF:

In the left panel style need to use overflow:hidden. Before you have used auto.

This means, your text was long so it's automatically added scroll in the bottom. Use below code,

#leftpanel {
    left: 0;
    width: 100px;
    overflow: hidden;
    height: 100%;
    background: gray;
    border: 2px solid black;
    position: fixed;
    z-index:100;
  }

Horizontal Scrolling Div Css, Lightweight jQuery plugin providing floating scrollbar functionality. Then with each card, we want to set it to display with inline-block so they all display in a row​. The Add overflow: hidden; to hide both the horizontal and vertical scrollbar. The good news is that we can prevent that with a sprinkle of CSS (and JavaScript) trickery. Let’s start with something simple We can make a huge dent to open-modal-page-scrolling ™ by setting the height of the entire body to the full height of the viewport and hiding vertical overflow when the modal is open:

CSS overflow-y property, Show different overflow-y property values: div.ex1 { overflow-y: scroll; } div.ex2 { overflow-y: The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges. Tip: Use the Side Navigation · Top Navigation This way, the scroll bar will only appear when the browser width is less then .boxA. The light blue represents the screen. The yellow is a background div, and the aqua is the foreground div where its width exceeds the screen width. In this case, I do not want the scroll bar to appear.

How To Hide Scrollbars With CSS, Add overflow: hidden; to hide both the horizontal and vertical scrollbar. Opera, supports the non-standard ::-webkit-scrollbar pseudo element, which allows us  In the Settings window, click the “Ease of Access” category. On the left side of the Ease of Access screen, click the “Display” option. On the right, turn off the “Automatically Hide Scroll Bars In Windows” toggle to make sure your scrollbars don’t disappear anymore.

overflow: hidden - overflow, The options include clipping, showing scrollbars, or displaying the content flowing if a float intersected with the scrolling element it would forcibly rewrap the In order for overflow to have an effect, the block-level container must have -moz-scrollbars-horizontal [1]: Use overflow-x : scroll and overflow-y  I've seen this asked a few times on SO, and the same answers are given which do not work on my end in Chrome or Firefox. I want to make a set of left-floated divs run off, horizontally a parent di

Comments
  • overflow: hidden should do it.