3

# 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>
2
  • 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 Commented Mar 3, 2017 at 18:43
  • i have many components inside scrollview not only listview Commented Mar 4, 2017 at 10:13

4 Answers 4

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>
Sign up to request clarification or add additional context in comments.

1 Comment

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.
0

Trying it by wrapping the scrollview into a AbsoluteLayout

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

Comments

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

3 Comments

i have given fix size for listview inside the scrollview but listview is not scrollable
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.
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..
0

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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.