1

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

ciantrius
  • 683
  • 1
  • 6
  • 21
  • It's beacause material add some margin or padding so the height exceed 250px that's why you see a a scrollbar. If you want to remove the scrollbar, just remove your maxheight and remover the overflow-y property – Nico Apr 04 '19 at 13:02
  • Remove the `overflow-y: auto` property; – Marc Hjorth Apr 04 '19 at 13:09
  • The lists in the app a generated dynamically so may have hundreds of items. Removing the max-height and overflow properties are not an option. – ciantrius Apr 04 '19 at 14:00

2 Answers2

1

@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;

}
MD Ashik
  • 9,117
  • 10
  • 52
  • 59
  • 1
    I'm sure I tried adding padding, but there you go. I'm not wild about the extra padding at the top but it's more pleasing than the scroll bars. Thanks. – ciantrius Apr 04 '19 at 14:06
0

Which browser do you use? If it is for example Firefox than there will be some Problems with the scrollbar. One "work around" is setting the inner width of the container bigger than the parent container, after that "cut" the scrollbar by setting the parent container to overflow hidden. If you want it always to be 100% of size, than you can set the inner container to calc(100 + 20px). 0px in this case is the scrollbar width. Hope this will help you.

Rakowu
  • 154
  • 10