Search code examples
htmlcssangular-materialangular-material-7

Remove unnecessary scroll bar from div overflow containing angular material checkboxes

If I build an html fragment with a div containing 4*<input type="checkbox"> and set overflow-y: auto and max-height: 250px; I get the expected behavior of no scroll bar. However if I replace the standard checkboxes with those from Angular Material I see a scrollbar, how can I remove this and keep the expected behavior above?

1st list is Angular Material, 2nd is standard html elements.

problem example

example stackblitz -> https://stackblitz.com/edit/angular-69zuiy

Solution

  • @Nico your right but we can also solved it by others way. If you add some padding like 10px or more then you can easily solved it. 

    .wrapper {
    padding: 10px 5px;
}

    this situation create those meterial style ....

    .mat-checkbox .mat-checkbox-ripple {
    position: absolute;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
    height: 40px;
    width: 40px;
    z-index: 1;
    pointer-events: none;

}