check_box_outline 아이콘에 추가 공간이 필요합니다.

Question

각 및 각재 프레임 워크를 사용하여 구성 요소의 디자인에 약간의 문제가 있습니다.

모든 것은 mat-sidenav-container을 기반으로합니다. sidenav에는 아코디언이 포함되어 있습니다. 확장 가능한 목록은 "categories"라고합시다. 각 확장 패널에는 항목의 선택 목록이 있습니다. 여태까지는 그런대로 잘됐다.

위의 선택 목록 위에 하나의 항목이 포함 된 일반 mat-list을 추가했습니다. 항목에 캡션 및 "모두 선택"옵션이 있습니다. "모두 선택"유틸리티의 경우 관련성이있는 클릭 가능한 mat-icon을 사용했습니다.

mat-icon이 check_box_outline으로 설정된 경우를 제외하고는 모든 것이 잘 작동하는 것처럼 보였습니다. 이러한 아이콘은 측면 탐색 막대 내에 수평 스크롤 막대를 나타냅니다. 아이콘 뒤에 빈 공간이 추가 된 것처럼 보이지만 그 이유를 모르겠습니다. 다른 아이콘에는 나타나지 않으며 check_box_outline_blank이나 indeterminate_check_box도 표시되지 않습니다.

사람에게 exactely 방법 스크롤 막대 모양을 방지하는 방법이 버그의 원인이 무엇인지 생각을 했습니까?

관련 코드와 데모를 on stackblitz (app 폴더 내)에 넣었습니다. 문제를 설명하기 위해 코드를 최대한 단순하게 유지했습니다. 나는 어떤 도움을 주셔서 감사합니다.

Answer 1

F12 도구를 사용하여, 나는 결함 요소의 폭을 볼 수 있지만, 보이는 같은 mat-icon 요소의 내부 내용이 mat-sidenav 컨테이너의 오버 플로우에 반영되어있는 경우 :

<mat-icon _ngcontent-c0="" class="mat-icon material-icons" role="img" aria-hidden="true"> 
       check_box_outline 
</mat-icon> 

렌더링 된 HTML에서 check_box_outline을 편집하면 해당 내용이 표시되지 않더라도 스크롤 막대가 새 내용에 맞게 조정됩니다. 을 styles.css에 다음 CSS 스타일을 추가

이 (the modified stackblitz 참조) 문제를 해결하기 위해 나타납니다

.material-icons { 
    overflow: hidden; 
}