Overflow-x stops working when I add overflow-y

Question

.scrollable-items {
  height: 100px;
  overflow-x: unset;
  overflow-y: auto;
  width: 60px;
}
.cx-mainnav-hoverwrapper {
  position: relative;
}

.cx-mainnav-hoverlabel {
  display: inline;
  position: absolute;
  top: 0;
  left: 50px;
  margin-top: 10px;
  opacity: 0;
  pointer-events: none;
  display: none;
}

.cx-mainnav:hover + .cx-mainnav-hoverlabel {
  opacity: 1;
  display: block;
}

<div class="scrollable-items">
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 1</div>
        <div class="cx-mainnav-hoverlabel">Icon 1 Tooltip</div>
      </div>
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 2</div>
        <div class="cx-mainnav-hoverlabel">Icon 2 Tooltip</div>
      </div>
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 3</div>
        <div class="cx-mainnav-hoverlabel">Icon 3 Tooltip</div>
      </div>
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 4</div>
        <div class="cx-mainnav-hoverlabel">Icon 4 Tooltip</div>
      </div>
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 5</div>
        <div class="cx-mainnav-hoverlabel">Icon 5 Tooltip</div>
      </div>

Basically, I have one vertical navigation bar

Before adding scrollbar-y, I used to see tooltip on hovering on element in left side of icon.

But, once I added overflow-y as auto, now I can't see tooltip on hover in left side of icon.

In this context, I want to add scrollbar on y axis, but I want to show tooltip as well in left side of icon when I hover over element. Currently, I am not able to achieve both things at same time.

Could you post a working code snippet that shows the problem? It'll be easier to work with it and help you then. — aghashamim, Sep 20 '22 at 21:07
See https://stackoverflow.com/help/minimal-reproducible-example for help with creating a runnable snippet. — A Haworth, Sep 20 '22 at 21:28
Please post yor full code as currently your issue cannot be reproduced. — ThS, Sep 20 '22 at 21:37
Updated code snippet in question to show that we are not able to see hoverable label once we add code for scrollbar. Note: I changed width, as my icons will be vertical as shown in image, and scrollbar will be immediately left side to it — Kiran, Sep 26 '22 at 19:43

aghashamim · Answer 1 · 2022-09-26T21:20:46.183

0

.scrollable-items {
  min-height: 100px;
  overflow-x: unset;
  overflow-y: auto;
  width: 60px;
}

.cx-mainnav-hoverlabel {
  display: inline;
  position: absolute;
  left: 50px;
  opacity: 0;
  pointer-events: none;
  padding: 2px 3px;
  border-radius: 3px;
}

.cx-mainnav:hover + .cx-mainnav-hoverlabel {
  background-color: crimson;
  color: white;
  opacity: 1;
  display: block;
}

<div class="scrollable-items">
        <div class="cx-mainnav-hoverwrapper">
          <div class="cx-mainnav">Icon 1</div>
          <div class="cx-mainnav-hoverlabel">Icon 1 Tooltip</div>
        </div>
        <div class="cx-mainnav-hoverwrapper">
          <div class="cx-mainnav">Icon 2</div>
          <div class="cx-mainnav-hoverlabel">Icon 2 Tooltip</div>
        </div>
        <div class="cx-mainnav-hoverwrapper">
          <div class="cx-mainnav">Icon 3</div>
          <div class="cx-mainnav-hoverlabel">Icon 3 Tooltip</div>
        </div>
        <div class="cx-mainnav-hoverwrapper">
          <div class="cx-mainnav">Icon 4</div>
          <div class="cx-mainnav-hoverlabel">Icon 4 Tooltip</div>
        </div>
        <div class="cx-mainnav-hoverwrapper">
          <div class="cx-mainnav">Icon 5</div>
          <div class="cx-mainnav-hoverlabel">Icon 5 Tooltip</div>
        </div>
      </div>

edited Sep 26 '22 at 21:20

answered Sep 20 '22 at 21:28

aghashamim

553
3
9

add width as 50px in .scrollable-items block. Now you will see that hover element are not visible. I want them to be visible – Kiran Sep 21 '22 at 00:24
A little late but I have updated my solution, just in case if it still helps. – aghashamim Sep 26 '22 at 17:24
Updated code snippet in question to show that we are not able to see hoverable label once we add code for scrollbar. Note: I changed width, as my icons will be vertical as shown in image, and scrollbar will be immediately left side to it – Kiran Sep 26 '22 at 19:40
My code snippet shows that the tooltip is showing, you can run and see. It has your updated CSS that you've posted with a few modifications which are not related to scrollbar? Is there any issue that you're facing with this? Also, would it be okay to use JavaScript? Would you be open to using some existing package? Just for additional info. – aghashamim Sep 26 '22 at 21:22
In your code, add in scrollable-items class, add height as 50px so that scrollbar becomes visible(your current code does not show scrollbar when I run it). Now you can see that hoverable item is visible but it's not exactly right side of Icon. For example, if I scrolled and hovered over Icon 5, it's too much below from icon5. Note: I want that when I scroll icon5, and bring that up, and then hover over icon, hoverable text should be it's exactly in right side. But currently, it's not in exactly right side. Note: I want pure CSS solution... Note: I don't want any packages involved... – Kiran Sep 28 '22 at 15:22

score 0 · Answer 2 · answered Sep 21 '22 at 06:16

You could unset the overflow-y on hover.

.scrollable-items {
  min-height: 300px;
  overflow-x: unset;
  overflow-y: auto;
  width: 50px;
}

.scrollable-items:hover {
  overflow-y: unset;
}

.cx-mainnav-hoverwrapper {
  position: relative;
}

.cx-mainnav-hoverlabel {
  display: inline;
  position: absolute;
  top: 0;
  left: 50px;
  margin-top: 10px;
  opacity: 0;
  pointer-events: none;
}

.cx-mainnav:hover+.cx-mainnav-hoverlabel {
  opacity: 1;
}

<div class="scrollable-items">
  <div class="cx-mainnav-hoverwrapper">
    <div class="cx-mainnav">Icon 1</div>
    <div class="cx-mainnav-hoverlabel">Icon 1 Tooltip</div>
  </div>
  <div class="cx-mainnav-hoverwrapper">
    <div class="cx-mainnav">Icon 2</div>
    <div class="cx-mainnav-hoverlabel">Icon 2 Tooltip</div>
  </div>
  <div class="cx-mainnav-hoverwrapper">
    <div class="cx-mainnav">Icon 3</div>
    <div class="cx-mainnav-hoverlabel">Icon 3 Tooltip</div>
  </div>
  <div class="cx-mainnav-hoverwrapper">
    <div class="cx-mainnav">Icon 4</div>
    <div class="cx-mainnav-hoverlabel">Icon 4 Tooltip</div>
  </div>
  <div class="cx-mainnav-hoverwrapper">
    <div class="cx-mainnav">Icon 5</div>
    <div class="cx-mainnav-hoverlabel">Icon 5 Tooltip</div>
  </div>

You'll have to decide whether that is good enough for your real life case (the scrollbar disappearing on hover for example).

Updated code snippet in question to show that we are not able to see hoverable label once we add code for scrollbar. Note: I changed width, as my icons will be vertical as shown in image, and scrollbar will be immediately left side to it — Kiran, Sep 26 '22 at 19:40
In your code, add height as 50px in .scrollable-items so that scrollbar is visible. Now you will see hoverable text on hover, but you won't be able to scoll text, as whenever you try to scroll, it will remove scrollbar and will show text. — Kiran, Sep 28 '22 at 15:38

score 0 · Answer 3 · answered Oct 01 '22 at 22:33

I hope this answers you question. (the comments section is always open)

.scrollable-items {
  width: 100px;
  height: 90px;
  /* position: relative; */
  overflow-y: auto;
  /* to make it scrollable 'y' only */
  overflow-x: hidden;
  font-size: 1.5rem;
}

.cx-mainnav {
  /*position: relative;*/
  display: inline;
}

.cx-mainnav-hoverwrapper {
  /* position: relative; */
  position: absolute;
  visibility: hidden;
}

.cx-mainnav-hoverlabel {
  display: block;
  position: relative;
  font-size: 1.1rem;
}

.cx-mainnav:hover .cx-mainnav-hoverwrapper {
  visibility: visible;
  opacity: 1;
}

<div class="scrollable-items">
  <div class="cx-mainnav">
    <span>Icon 1</span>
    <span class="cx-mainnav-hoverwrapper"><span class="cx-mainnav-hoverlabel">Icon 1 tooltip</span></span>
  </div>
  <div class="cx-mainnav">
    <span>Icon 2</span>
    <span class="cx-mainnav-hoverwrapper"><span class="cx-mainnav-hoverlabel">Icon 2 tooltip</span></span>
  </div>
  <div class="cx-mainnav">
    <span>Icon 3</span>
    <span class="cx-mainnav-hoverwrapper"><span class="cx-mainnav-hoverlabel">Icon 3 tooltip</span></span>
  </div>
  <div class="cx-mainnav">
    <span>Icon 4</span>
    <span class="cx-mainnav-hoverwrapper"><span class="cx-mainnav-hoverlabel">Icon 4 tooltip</span></span>
  </div>
  <div class="cx-mainnav">
    <span>Icon 5</span>
    <span class="cx-mainnav-hoverwrapper"><span class="cx-mainnav-hoverlabel">Icon 5 tooltip</span></span>
  </div>
</div>

The reason you see tooltip 4 and 5 a little off positioned is because of real and pseudo positioning (that is because of scrolling).

Overflow-x stops working when I add overflow-y

3 Answers3