Remove unnecessary scroll bar from div overflow containing angular material checkboxes

Question

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.

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

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
– Nico, Commented Apr 4, 2019 at 13:02
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
– ciantrius, Commented Apr 4, 2019 at 14:00

MD Ashik · Accepted Answer · 2019-04-04 13:10:59Z

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;

}

answered Apr 4, 2019 at 13:10

MD Ashik

9,89310 gold badges56 silver badges61 bronze badges

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

1 Comment

ciantrius Over a year ago

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.

Rakowu · Accepted Answer · 2019-04-04 13:11:43Z

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.

answered Apr 4, 2019 at 13:11

Rakowu

16410 bronze badges

Collectives™ on Stack Overflow

Remove unnecessary scroll bar from div overflow containing angular material checkboxes

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related