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

Question

# 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>

If that's the entire layout you don't need a scrollview unless you want that search bar to move. Listviews scroll by default. Maybe you're after a different end result than I'm imagining but if you just want the list to scroll remove the scrollview — Brad Martin
– Brad Martin, Commented Mar 3, 2017 at 18:43

Rakesh · Accepted Answer · 2019-03-28 14:01:36Z

1

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>

edited Mar 28, 2019 at 14:01

answered Jan 29, 2018 at 18:53

Rakesh

4,2922 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Blue Over a year ago

This is a borderline link-only answer. You should expand your answer to include as much information here, and use the link only for reference.

Oscar · Accepted Answer · 2017-03-03 17:24:44Z

0

Trying it by wrapping the scrollview into a AbsoluteLayout

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

answered Mar 3, 2017 at 17:24

Oscar

11 bronze badge

Comments

Efrain Zaldumbide · Accepted Answer · 2017-03-06 19:22:07Z

0

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

edited Mar 6, 2017 at 19:22

answered Mar 5, 2017 at 7:11

Efrain Zaldumbide

614 bronze badges

3 Comments

Shivaraj Rajagolkar Over a year ago

i have given fix size for listview inside the scrollview but listview is not scrollable

Efrain Zaldumbide Over a year ago

Check the updated answer and I hope it heps you, otherwise, send what you want to get in the view so we can manage a solution to implement it.

Shivaraj Rajagolkar Over a year ago

i have parent view as scrollview inside that i have many components like textview and drpodown list etc and i have listview also which not scrolling if i use scrollbar as its parent view..

Efrain Zaldumbide · Accepted Answer · 2017-03-07 06:59:27Z

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>

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related