md-checkbox inside <div md-dialog-content> shows vertical scrollbar

[julianobrasil]

Bug, feature request, or proposal:

Bug, I think. New issue based on a closed one (#4748), to provide more details.

What is the expected behavior?

When you use a md-checkbox inside a <div md-dialog-content> container the vertical scrollbar must not be shown.

What is the current behavior?

The vertical scrollbar is beeing shown when you put the md-checkbox as the last component inside md-dialog-content (if you do not use md-dialog-content attribute, or if you do not put the md-checkbox as the last component, everything works just fine):

<div md-dialog-content>
  <div >
      test 1
  </div>
  <div >
      test 2
  </div>
  <div>
      <md-checkbox>This is a text test</md-checkbox>
  </div>
</div>

What are the steps to reproduce?

Just open a md-dialog with the above discribed setup. The result is shown in the image bellow the following plunker link.

plunker: https://plnkr.co/edit/pjTo0vekZfDV7eHEtsF6?p=preview

If you switch positions of the test 2 div and the md-checkbox div, the vertical scrollbar goes away:

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

Use the md-checkbox inside md-dialog

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

@angular/cli: 1.0.4
node: 6.10.3
os: win32 x64
@angular/animations: 4.1.3
@angular/cli: 1.0.4
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/compiler-cli: 4.1.3
@angular/core: 4.1.3
@angular/flex-layout: 2.0.0-beta.8
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/material: 2.0.0-beta.5
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/platform-server: 4.1.3
@angular/router: 4.1.3

Typescript: 2.3.2

Is there anything else we should know?

I've noticed that if I do not put the checkbox as the last component of the md-dialog-container in the plunker example, the scrollbar isn't shown. I faced the problem in Chrome 58.0.3029.110, and did not test in other browsers.

[mmalerba]

@tinayuangao looks like checkbox doesn't include sufficient margin/padding

[devversion]

@mmalerba Yeah it's kinda related to missing margin on the checkbox.

The absolute ripple container exceeds the boundaries of the md-checkbox element and therefore causes the scrollbars to appear.

In general I thought that all of our components should not have any outer-margin set by default.

[mmalerba]

@devversion This is mostly true, but it might make sense to wrap it in an extra div and add some padding, since it looks kind of bad when the ripple overflows. The md-input-container does this, that way the component supplies the minimum required "margin" and the actual margin is reserved for additional space the user may want to add

[tinayuangao]

I don't think we should add outer-margin for checkbox or add padding with an extra div. Checkbox often appear in groups and their ripple elements may overlap. It's also better to let user add outer-margin so margins can collapse.
It looks strange when we reserve the padding only for ripples:

[julianobrasil]

@tinayuangao, what about exposing the margin through an input attribute to the developer change it when it's necessary?

[julianobrasil]

Or, if the problem really happens just when the checkbox is the last component of a container:

md-checkbox:last-of-type label {
  margin-bottom: 0.8rem;
}

Forgive me if these sugestions are kind of stupid... I'm no css expert.
Edited: And this is obviously not a solution to the case you pointed out above.

[mmalerba]

I would say let's just create a CSS class that the use can optionally add mat-checkbox-margin or something like that, but I don't really know of anywhere else in the library where CSS classes are part of our API, I'm not sure if that's something we want to start doing...