Overflow-y empty space bug?

Question

This seems to be a fairly common and not-fancy use case, but I haven't run into it before. I set up a pen, but can't replicate it there, and I'm pulling my hair out trying to figure out why.

Demo Pen

The left sidebar has a custom scroll-window for a list of items, but though setting overflow-y: scroll gives me a nice scrollable list, it also creates a huge block of whitespace equal to the height of the list on the left if overflow-y wasn't set to scroll. This whitespace is outside of the HTML tag (and because that blue background stops). So it appears there's something going on with height calculations, but I just don't know what else I can play with.

In my app, I've tried commenting out both the overflow-y and display: grid on my content wrapper, and upon doing either, the whitespace disappears. But of course I need both of these properties. Do I need to set another height somewhere?

What's the role of height: 1000px on the section element? — Michael Benjamin
– Michael Benjamin, Commented Dec 13, 2017 at 16:21
Just to see if that surfaced the bug; it doesn't affect anything. — redOctober13
– redOctober13, Commented Dec 13, 2017 at 16:29

redOctober13 · Accepted Answer · 2017-12-13 18:59:13Z

7

I found the issue finally! Had to do with absolutely-positioned elements. I'm using custom checkboxes to do a filled square instead of the browser's defaults, and part of that code (which I borrowed and modified) was to set the input itself to position:absolute which took it out of normal flow of course (hence why my 100vh wasn't making a difference). Adding simply top: 0 fixed it all. I'd love if somebody could explain why setting top to its default value makes a difference here.

HTML (Angular)

<li class="flex justify-between" *ngFor="let error of hardSummary">
    <input class="m-checkbox" id="{{'h' + error.errorCode}}" type="checkbox" [(ngModel)]="error.isChecked" (click)="filterByError(error)">
    <label for="{{'h' + error.errorCode}}">
        {{error.errorCode}}
    </label>
  <span>{{error.count}}</span>
</li>

SCSS:

.m-checkbox {
  position: absolute;
  opacity: 0; // hide it
  top: 0; // <<<<<<< THIS IS ALL THAT I NEEDED TO ADD

  & + label {
    position: relative;
    cursor: pointer;
    padding: 0;
  }

  // Box.
  & + label:before {
    content: '';
    margin-right: 4px;
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
    background: #f4f4f4;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;
  }

  // Box hover
  &:hover + label:before {
    background: #d8d8d8;
  }

  // Box focus
  &:focus + label:before {
    border: 1px solid #666;
  }

  // Box checked
  &:checked + label:before {
    background: #448aff;
  }

  // Disabled state label.
  &:disabled + label {
    color: #b8b8b8;
    cursor: auto;
  }

  // Disabled box.
  &:disabled + label:before {
    box-shadow: none;
    background: #ddd;
  }

  // Checkmark. Could be replaced with an image
  &:checked + label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 11px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
    transform: rotate(45deg);
    transition: all 0.2s;
  }
}

answered Dec 13, 2017 at 18:59

redOctober13

4,0667 gold badges41 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Michael Benjamin Over a year ago

"Adding simply top: 0 fixed it all. I'd love if somebody could explain why setting top to its default value makes a difference here." Zero is not the default value of top. It's auto. See the bullet points in my answer here: stackoverflow.com/q/38679945/3597276

dj-neza Over a year ago

This just saved my life!

nlh Over a year ago

This also just saved my life (and GPT-4 couldn't figure it out either ;). Thanks for sharing this - I was battling this bug all day and turns out a deeply-nested component in my table also had a position: absolute attribute, which threw the whole table out of whack.

Isaackoz Over a year ago

Ran into the same problem with Shadcn's Checkbox. I just made the parent's position: relative and it fixed the problem.

Collectives™ on Stack Overflow

Overflow-y empty space bug?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related