Newbe Dev Stack

Answer : It's okay to exceed 12 column units in a row. It causes the columns to wrap, but you can override the wrapping with flexbox. Bootstrap 4 uses flexbox, and the utility classes to get a horizontal scrolling layout.. <div class="container-fluid"> <div class="row flex-row flex-nowrap"> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> <div class="col-3"> .. </div> </div> </div> ...

Answer : Add to your app module imports: ScrollDispatchModule . Add cdkScrollable to your mat-sidenav-content : <mat-sidenav-content cdkScrollable> </mat-sidenav-content> In your root component: a) inject ScrollDispatcher from @angular/cdk/overlay and subscribe to scrolling: constructor(public scroll: ScrollDispatcher) { this.scrollingSubscription = this.scroll .scrolled() .subscribe((data: CdkScrollable) => { this.onWindowScroll(data); }); } c) do something when scrolling, e.g. check the offset private onWindowScroll(data: CdkScrollable) { const scrollTop = data.getElementRef().nativeElement.scrollTop || 0; if (this.lastOffset > scrollTop) { // console.log('Show toolbar'); } else if (scrollTop < 10) { // console.log('Show toolbar'); } else if (scrollTop > 100) { // console.log('Hide toolbar'); } this.lastOffset = scrollTop; } D...

Answer : SafeAreaView only works with iOS . Therefore, it is assumed that you use the iOS . If your project is iOS , you can use KeyboardAwareScrollView . SafeAreaView should be at the top because it covers the area of the screen. KeyboardAwareScrollView Example Usage import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view' ... <SafeAreaView> <KeyboardAwareScrollView> <View> <TextInput /> </View> </KeyboardAwareScrollView> </SafeAreaView>