How to remove resizing content when overflow when is hover?

Question

I have problem with overflow in on my website. When mouse is not over the left menu, it look OK, but when I move mouse over the menu and :hover is active, content (menu is a content) is a little smaller. I don't want this effect when :hover is active, menu is a little smaller.

Effect that I want is like on Youtube. If you are logged into your account, and if you pressed menu icon next to Youtube logo, you will get scroll menu. When mouse is not over the menu, nothing happens. But when you move your mouse over the menu, overflow is visible and this not change content size.

In brief:

I have this:

when overflow is active, content is smaller

What I want is this:

when overflow is active, content is NOT smaller

How can I do it ?

Thanks :)

I have just that in my css: nav { overflow-y: hidden; } nav:hover { overflow-y: scroll; } — adi5497, Dec 31 '15 at 10:44

score 0 · Answer 1 · answered Dec 31 '15 at 11:19

0

My understanding, though it maybe flawed is that you have to already have the space that the scroll bar will populate there. You didn't give us any code so I had to fabricate it, but this is what I came up with

https://jsfiddle.net/link2twenty/bxz60j4r/

HTML:

<div class="sidebar">
  <div class="container">
    <div class="profile">
      <img src="http://moss-side.yoursquaremile.co.uk/img/default-profile-pic.png" />
    </div>
    <div class="card">
      <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
      <span>Test card data</span>
    </div>
    <div class="spacer">
      <hr>
    </div>
    <div class="card">
      <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
      <span>Test card data</span>
    </div>
    <hr>
    <div class="card">
      <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
      <span>Test card data</span>
    </div>
    <hr>
    <div class="card">
      <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
      <span>Test card data</span>
    </div>
    <hr>
    <div class="card">
      <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
      <span>Test card data</span>
    </div>
  </div>
</div>

CSS:

.sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 400px;
  overflow: hidden;
  padding-right: 17px;
}

.sidebar:hover {
  padding-right: 20px;
  overflow-y: auto;
}

.sidebar .container {
  width: 400px;
  background: #8cc34b;
  margin-bottom: -25px;
}

.card {
  opacity: .7;
  width: 100%;
  height: 120px;
  background: #8cc34b;
}

.card span {
  position: relative;
  float: right;
  padding-right: 50px;
  top: 50%;
}

hr {
  margin-left: 120px;
  margin-right: 20px;
  border-color: darkgreen;
  opacity: .7;
}

answered Dec 31 '15 at 11:19

Andrew Bone

6,549
2
15
31

In your example i can see that what i want: You can see my problem here: http://adrian-gradek.tk/ Menu change size after hover and i dont know how to fix it – adi5497 Dec 31 '15 at 11:40
Yes i see. And that's a problem, content when is :hover change size – adi5497 Dec 31 '15 at 12:18
I think the problem arises because it's not fixed width so you can't (easily) trick it – Andrew Bone Dec 31 '15 at 12:31
See if we set the size (oppose to using percentage) https://jsfiddle.net/link2twenty/d82sf4u3/1/ we can use padding instead of changing the size – Andrew Bone Dec 31 '15 at 12:34
So i cant use percent to set a width ? – adi5497 Dec 31 '15 at 12:43
I used percent because i wanted to autoscale my website at different resolution. – adi5497 Dec 31 '15 at 12:45
ah I'd use media queries for that, much better control https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – Andrew Bone Dec 31 '15 at 12:45
Then when it gets down to phone size you can take way the space for the scroll bar as phones don't use then the same :-) – Andrew Bone Dec 31 '15 at 12:46
I'm useing media queries for mobile now :) If you zoom in (ctrl + scroll up) you will see that :) It's not perfect but work :) – adi5497 Dec 31 '15 at 12:50
https://jsfiddle.net/link2twenty/b92w8tz8/ ah ok here's a quick example anyway :-) – Andrew Bone Dec 31 '15 at 12:52
Or can we get scrollbar outside ? – adi5497 Dec 31 '15 at 13:01
Ok wait :) I'm trying to do that :) I thing I got it :) – adi5497 Dec 31 '15 at 13:24

score 0 · Answer 2 · edited May 23 '17 at 11:52

You can try the following:

.scrollable {
  border: 1px solid black;
  width: 100px; /* specify the width you like here */
  overfow: hidden;
}

.scrollable:hover {
  overfow-y: scroll;
}

nav {
  border: 1px solid grey;
  width: 80px; /* specify the width which is calculated as widthOfScrollable - widthOfScrollbar */
}

.item1, .item2 {
  height: 10px;
  width: 100%;
}

.item1 { background: red }
.item2 { background: blue }

<div class="scrollable">
  <nav>
    <li class="item1"></li>
    <li class="item2"></li>
  </nav>
</div>

Borders and colors are used to show the blocks.

Here you preserve some space for the scrollbar on the right side. Problem here is to preserve exactly the scrollbar size for the current user / browser / OS. They all could have differences in scrollbar width value, so there are two ways for you to go:

Use this function from here Getting scroll bar width using JavaScript to calculate the proper size of the scrollbar
Make the scrollbar margin big enough to cover any case on any operating system

How to remove resizing content when overflow when is hover?

2 Answers2