Hide Scroll View's scrollbars in both Ios & Android


#1

Hi,
I have followed the Hide scrollview indicator thread discussed here by @mortezadalil , @Pete.K & @manijak.

I have tried with the same, but i don’t get.

My Codes,

app.component.html

<StackLayout row="1" class="page-body-common">
<ScrollView id="adtsumscrl" >
<StackLayout>
        <Label class="m-15 h2 text-left" color="darkblue" text="The undersigned has carried out the above:" textWrap="true"></Label>
        <StackLayout class="p-10" *ngFor="let option of radioOptions">
            <StackLayout orientation="horizontal" verticalAlignment="center">
                <CheckBox #elem [checked]="option.selected" (checkedChange)="elem.checked !== option.selected && changeCheckedRadio(option)" class="checkbox"></CheckBox>
                <StackLayout verticalAlignment="center">
                    <Label class="m-15 h2 text-left" [text]="option.text" textWrap="true" (tap)="changeCheckedRadio(option)"></Label>
                </StackLayout>
            </StackLayout>
        </StackLayout>
    </StackLayout>
</ScrollView>
</StackLayout>

app.component.ts

import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
import {Page} from "ui/page";
import { isAndroid, isIOS, device, screen } from "platform";
import { RadioOption } from "../../shared/ism/radio-option";
import { View } from "ui/core/view";

@Component({
    selector: "ismvesseldetails",
    templateUrl: "./aud/is/vcomdetails.html"   
})

export class Vcomdetails implements OnInit {
      @ViewChild('adtsumscrl') scrollview:ElementRef; 
  radioOptions?: Array<RadioOption>;
  constructor(private page: Page){
**if(isAndroid){**
**  let scrollview = <View>this.scrollview.nativeElement;**
**scrollview.android.setVerticalScrollBarEnabled(false); **

**}**
**else if (isIOS) {**
**this.scrollview.nativeElement.ios.showsVerticalScrollIndicator = false; **
**}**
}
ngOnInit() {

    //audit summary array oninit
this.radioOptions = [
      new RadioOption("is in compliance with the requirements. )"),
      new RadioOption("is in compliance with the requiremt.."),
      new RadioOption("is in compliance with the requirements .."),
      new RadioOption("is in compliance with the provisions )"),
      new RadioOption("not approved, the audit was temporarily suspended..)"),

    ];

}

 public checkedChange(modelRef) {
    console.log("checkedChange:", modelRef.checked);
  }

changeCheckedRadio(radioOption: RadioOption): void {
    radioOption.selected = !radioOption.selected;

    if (!radioOption.selected) {
      return;
    }

    // uncheck all other options
    this.radioOptions.forEach(option => {
      if (option.text !== radioOption.text) {
        option.selected = false;
      }
    });
  }

}

Thanks in advance.


#2

Try to put it in ngAfterViewInit and wrap it inside setTimeout giving it few milisecs.


#3

As you told @berchik,

ngAfterViewInit() -

   ngAfterViewInit() {
         
let scrollvie = <View>this.scrollview.nativeElement;

   setTimeout(() => {
 if(isAndroid){
scrollvie.android.setVerticalScrollBarEnabled(false);
}
else if (isIOS) {
scrollvie.ios.showsVerticalScrollIndicator = false; 
}
                   }, 10);
    }

Thank you @berchik. I was tested with android, its working perfect.

But what about Ios, same code will work or need to modify anything?


#4

I think it will. As far as I remember I didn’t have any problem on IOS.


#5

Got it @berchik. I will let u know later once i will check with IOS.


#6

Once i navigate to back, That time again the Scrollview showing the scrollbars/indicator.
ngAfterViewInit() should be called after a component’s view.

But Issue is when tried to navigate back using android device navigation bar back option, Its showing the scrollbars.
How to solve this?


#7

Not sure about how your code is managed, but my guess is that if you use page-router-outlet then your page is loaded from cache and AfterViewInit is not fired again.

Since you’re already using Page in your constructor, give it a try and set it to fire your hide-scrolling routine by setting the back navigation event like this:

  this.page.on(Page.navigatingToEvent, (e:NavigatedData) => {     
        if (e.isBackNavigation) {  
           this.myHideVerticalScrollFunction();
        }
     })

You might try to take it out of the ngAfterViewInit, and remove if (isBackNavigation).. and have your hiding function fired on every navigatingToEvent.

Good luck.


#8

I PRd this, should be available OOTB on 3.2…

“scrollBarIndicatorVisible” in the xml


#9

Hi, when i try doing this i get scrollview perfectly. But ‘android’ in scrollview.android.setVerticalScrollBarEnabled is undefined.

Any help appreciated.


#11
<ScrollView scrollBarIndicatorVisible="false">
</ScrollView>

#12

Thanks that worked…


#13

this is the perfect answer for this issue. sir can u help me i styling the indicator color , width , length…