CODEWITHSUNDEEP
nativescript
Shivaraj Rajagolkar
Shivaraj Rajagolkar

Reputation: 111

why Listview is not scroll-able inside scrollview in nativescrit angular2

# I am using listview inside the Scrollview but listview is not scrollable inside the scrollview as top parent view

component.html
    <ScrollView>
  <StackLayout class="zindex">
        <!--<AutoComplete [items]="ArrayVillage" (itemTap)="itemTapped($event)"> </AutoComplete>-->
        <SearchBar row="0" #sb hint="Search for a country and press enter" (clear)="onClear()" [text]="searchPhrase" (submit)="onSubmit(sb.text)"></SearchBar>
        <ListView row="1" [items]="myItems" class="list-group">
          <template let-item="item">
            <GridLayout class="item" class="list-group-item">
              <Label [text]="item.name" class="list-group-item-heading"></Label>
            </GridLayout>
          </template>
        </ListView>
      </StackLayout>
 <ScrollView>

Upvotes: 3

Views: 3061

Answers (4)

Rakesh
Rakesh

Reputation: 4252

Try Using Repeater instead of ListView as mentioned in https://docs.nativescript.org/cookbook/ui/repeater. Following is an example of how you can include Repeater inside a ScrollView and can obtain whole layout as scrollable.

<ScrollView>
    <StackLayout class="margin">
        <Label text="{{ description }}"></Label>
        <Repeater items="{{ options }}" row="1">
            <Repeater.itemTemplate>
                <StackLayout>
                    <Label text="{{ description }}"></Label>
                </StackLayout>
            </Repeater.itemTemplate>
        </Repeater>
    </StackLayout>
</ScrollView>

Upvotes: 1

Efrain Zaldumbide
Efrain Zaldumbide

Reputation: 61

Look at the video, play with the emulator and you will see that at the beggining it seems to work but is the "computer mouse scroll" when you use click trying to scroll it doesn't work anymore and is because the screen doesn't know which scrollable element has to scroll.

To do 2 scrollable parts can be a solution, as shown in the end of the video (I implemented in Nativescript with Javascript because I'm working in a project but is almost the same) 

<StackLayout>
    <Label fontSize="20" color="blue" text="You can do two scrollable parts" textWrap="true" />
    <Button text="to" />
    <ListView items="{{ items }}"  height="300" loaded="onLoaded" itemLoading="onItemLoading" itemTap="onItemTap">
        <ListView.itemTemplate>
                <Label text="{{ name }}" textWrap="true" />
        </ListView.itemTemplate>
    </ListView>
<ScrollView>
    <StackLayout>
        <Button text="1" />
        <Button text="2" />
        <Button text="3" />
        <Button text="4" />
        <Button text="5" />
        <Button text="6" />
        <Button text="3" />
        <Button text="4" />
        <Button text="5" />
        <Button text="6" />
    </StackLayout>
</ScrollView>
</StackLayout>

Upvotes: 0

Efrain Zaldumbide
Efrain Zaldumbide

Reputation: 61

Having a scrollview inside other one is not a good practice. It doesn't work beacuse scrollview tries to calculate the infinite view and do it with a scrollable inside could work just in some cases having control of the parent view, but don't go that painfull way.

In your code I have a question, why would you want to scroll the SearchBar? Try this structure I think is what you want.

<StackLayout>
<SearchBar></SearchBar>
<ListView>
    <template>
        <GridLayout >
            <Label ></Label>
        </GridLayout>
    </template>
</ListView>

The SearchBar is fixed and the List scrolllable

Upvotes: 0

Oscar
Oscar

Reputation: 1

Trying it by wrapping the scrollview into a AbsoluteLayout

<AbsoluteLayout>
    <ScrollView>
        <StackLayout class="zindex">
         //Rest of stuff
        </StackLayout>
        <ScrollView>
</AbsoluteLayout>

Upvotes: 0

Related Questions