0

I have a panel that can be pinned to the right side of your screen. However some expand/collapse buttons overlaid to the very left edge of the panel are being clipped when the panel is pinned (position fixed). Screenshots of not pinned vs pinned where you can see the issue:

Not pinned:

not pinned

Pinned:

pinned

I made sure to apply the fixed position to a direct child of the actual panel, .panel-inner but the parent is overflow visible by default, so from what I understand should have any content overflow.

<div class="panel">
    <div class="panel-inner">
      <div class="panel-body">
        <div id="some-section">
          <div class="section">
            <div class="toggle-section">
              <div class="toggle-section-button">+</div>
            </div>
            <div class="section-panel">
              <div class="section-panel-heading">
                <span class="section-panel-heading-title">Panel Title</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Relevant styles:

.pinned {
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 75px);
  background-color: #fff3f3;
}

.panel-body {
  padding: 1.5rem 0;
}

.section {
  border: 1px solid #aaa;
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
}

.toggle-section {
  width: 20px;
  height: 20px;
  position: absolute;
  left: -10px;
  transform: translateY(calc(50% + 5px));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
}

And here is a working Pen: link.

You can click the button to toggle the pinned class. The scrolling doesn't quite work, but the "+" icon gets clipped, which is the issue I am experiencing in my actual site.

What am I missing? How can I have the icon overflow the ascendant panel?

dabadaba
  • 9,064
  • 21
  • 85
  • 155
  • That `overflow-x: hidden` simply does what it is supposed to here - it hides the overflow on the x-axis. If you do not want that ... well then you must not _apply_ that. – CBroe May 11 '23 at 10:26
  • @CBroe If I remove `overflow-x: hidden` then the horizontal scrollbar shows up and the button is still clipped. – dabadaba May 11 '23 at 10:35
  • You will need to remove `overflow-y: auto;` as well (otherwise `overflow-x` _effectively_ is still hidden; https://stackoverflow.com/a/6433475/1427878) – CBroe May 11 '23 at 10:47
  • But I need `overflow-y: auto` otherwise the fixed element wouldn't be scrollable. – dabadaba May 11 '23 at 10:49
  • Then make your panel a bit wider, so that the buttons _can_ be contained within it, or something like that. (What _exact_ behavior you need, resp. which edge cases might occur, is really hard to tell with such an out-of-context example.) – CBroe May 11 '23 at 10:54
  • Thank you! That actually gave me an idea: I added extra padding to the left to create space for the button to overflow in, and compensated with extra margin so it looks to be in the same position. I would accept that answer :) – dabadaba May 11 '23 at 11:03

0 Answers0