mat-checkbox causes scrolling in dialog

[jermowery]

Bug, feature request, or proposal:

If a mat-checkbox is the last element in a mat-dialog-content it will cause the dialog to to have a scrollbar, even if the content has not reached it's max height.

What is the expected behavior?

There should be no scrolling if the dialog has room to grow.

What is the current behavior?

The dialog scrolls when a mat-checkbox is present.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-dhosn1

Click the button, notice the dialog.

What is the use-case or motivation for changing an existing behavior?

It looks bad.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Whatever is used by stackblitz

Is there anything else we should know?

[jelbourn]

I have a hunch this has something to do with the ripple

[jermowery]

It does appear to be the ripple

[devversion]

This is a very tricky case. We could either have an outer margin for the checkbox component, specify an explicit height that also includes the ripple container, or just find a new way to show the ripples.

Having an outer margin goes against Angular Material's component principles, and having an explicit height isn't really better. I'll chat with more people from the team about this.

[jelbourn]

I'm lowering the priority on this since the workaround (adding a margin) is pretty simple / straightforward.

[ndunks]

I have same issue, fix by adding wrapper: html:

<div class="checkbox-wrapper">
  <mat-checkbox>Fixed in dialog</mat-checkbox>
</div>

Assume checkbox ripple radius is 25px, so need at least 50px height scss:

.checkbox-wrapper {
    min-height: 50px;
    display: flex;
    >mat-checkbox{
        align-self: center;
    }
}

More: https://angular-material-dialog-checkbox-ripple-fix.stackblitz.io/

[jermowery]

Ping

[jelbourn]

I'm not sure there's any action we're going to take on this one since the workaround is pretty straightforward and I'm not sure what a good, generally-applicable fix would be.

[fkalka]

I think this workaround is not always practicable. I Use the checkbox inside a table where i can't just make it 50px height, because i don't want the rows to be 50px height. The table is set to overflow: auto, because i wan't the table to scroll when there are too much rows or cols, but using a checkbox inside the table makes the scrollbars appear even if they shouldn't. I made the ripple the height of the row, but then it is pretty useless, because you don't see the nice eye-candy. And i also think in the dialog context it is not always an option to use the workaround. I.e. when you have some kind of grid-layout (where the cell-height is < 50px, or at least smaller the size where the ripple effect is still noticeable) inside a dialog with a checkbox in the last row.

[vdurante]

Issue still happening - https://stackblitz.com/edit/angular-vbvasx

[canpan14]

Bumping this that it's still going on. The above fix from @ndunks does work though. Even disabling the ripple doesn't help.

[Brhav]

Try adding the following class:

.mat-dialog-content--scrollbar-fix { &:after { content: " "; display: block; height: 10px; }

[Selindek]

An other solution if you add an empty paragraph after the last checkbox.

The issue only happens if the very last element is a mat-checkbox in the mat-dialog-content

<p></p>

[jermowery]

So I reported this bug 7 years ago, is there any chance this will actually be fixed, or should the documentation just be updated to indicate that this is how this works?