CODEWITHSUNDEEP
htmlcssangular-materialangular-material-7
ciantrius
ciantrius

Reputation: 693

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

Upvotes: 1

Views: 1798

Answers (2)

Rakowu
Rakowu

Reputation: 154

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.

Upvotes: 0

MD Ashik
MD Ashik

Reputation: 9835

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

}

Upvotes: 1

Related Questions