CODEWITHSUNDEEP
androidiosvue.jsnativescriptnativescript-vue
Sasank M
Sasank M

Reputation: 87

ListView is not rendering inside ScrollView and StackLayout with orientation horizontal in ios - nativescript-vue

ListView is not rendering when implemented inside ScrollView and StackLayout with orientation horizontal in ios but same is rendering in android - vertical and horizontal scaling table

  <ScrollView orientation="horizontal">
    <StackLayout orientation="horizontal">
      <RadListView for="todo in monthlyMeterData">
        <v-template>
          <GridLayout columns="150,100,100,100,100,100,100,100,100,100,100,100,100,100">
            <Label :text="todo.region" col="0"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="1"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="2"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="3"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="4"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="5"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="6"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="7"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="8"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="9"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="10"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="11"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="12"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="13"/>
          </GridLayout>
        </v-template>
      </RadListView>
    </StackLayout>
  </ScrollView>

Ios Android

Upvotes: 1

Views: 1071

Answers (1)

Tiago A.
Tiago A.

Reputation: 2586

For some reason, on iOS, the RadListView width is not being properly calculated. Since you have columns with fixed width, you can force the total width (1450). Also, you don't need that <StackLayout>. I got it working with this code:

<ScrollView orientation="horizontal">
  <RadListView for="todo in monthlyMeterData" width="1450">
    <v-template>
      <GridLayout columns="150,100,100,100,100,100,100,100,100,100,100,100,100,100">
      <!-- ... -->

I hope it helps!

Upvotes: 1

Related Questions