Carousel view always takes 100% of the screen height

[terreb]

nativescript 2.3.0 tns-core-modules 2.3.0 tns-ios 2.3.0 nativescript-carousel-view 2.0.1 simulator iOS 9.3

How to reproduce:

1. in demo app first install nativescript-carousel-view v 2.0.1 from npm
2. change all references to npm module (this is for clean test since I don't know what version is in the local folder by default)
3. Change main-page.xml to:

<Page
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:controls="nativescript-carousel-view"
  navigatingTo="navigatingTo">

  <ActionBar title="Demo"/>

  <GridLayout rows="100 * 50">
      <controls:CarouselView row="0" id="carouselView" position="0" height="100" templateSelector="{{ templateSelector }}" itemsSource="{{ itemsSource }}"/>
      <Label text="TEST" row="1" height="100%" backgroundColor="red"/>
      <GridLayout row="2" columns="50, *, 50" rows="*" style.backgroundColor="lightgray">
          <Label tap="onPrev" text="Prev" row="0" col="0" style.textAlignment="center" style.verticalAlignment="center"/>
          <Label text="Add page" id="addPage" row="0" col="1" style.textAlignment="center" style.verticalAlignment="center"/>
          <Label tap="onNext" text="Next" row="0" col="2" style.textAlignment="center" style.verticalAlignment="center"/>
      </GridLayout>
  </GridLayout>

</Page>

4. Change slider-view.xml as the following:

<StackLayout loaded="onLoaded" orientation="horizontal" backgroundColor="blue">
    <Label text="{{ first }}"/> 
    <Label text="{{ last }}"/>
    <Button text="Remove me" tap="buttonTap"/> 
</StackLayout>

5. Run the app

You should notice that labels and button inside slide are hidden under the middle red view (label test). If you comment that view out you will see them. If you try to swipe left the slider at the middle of the screen (at the level of the labels and button) it won't work. Only if you swipe it on top within first 100dpi below actionbar it will work.

Expected behaviour:

1. The height of the slider (blue view) should be 100dpi (because height is set to 100)
2. Labels and button should be within the slide
3. Swipe work at any point inside slide

Please let me know if you require more info on this.

[alexrainman]

Because you are declaring grid rows in wrong way. I just tested and it works like a charm. CarouselView behaves like any other {N} view.

rows="100,*,50"

[terreb]

FYI: rows=""100 * 50" or rows="100,*,50" are both correct declaration. Let me share my repo with you to see the issue. Probably there is something else that lead to that issue.

[alexrainman]

You may be doing something wrong in your side. I just tested and it works. As i said, CarouselView behaves like any other {N} view.

[terreb]

First off, as I see you didn't copy the code I mention above:

<StackLayout loaded="onLoaded" orientation="horizontal" backgroundColor="blue">
    <Label text="{{ first }}"/> 
    <Label text="{{ last }}"/>
    <Button text="Remove me" tap="buttonTap"/> 
</StackLayout>

Can you do this?

[alexrainman]

I did exactly what you are reporting.

[terreb]

It's not blue and orientated horizontally on your screenshot.

[terreb]

Can you run this please https://github.com/terreb/nativescript-carousel-view-test to see what I mean?

[alexrainman]

Blue and oriented horizontally? I dont know what you are trying to do.

[alexrainman]

I can do that with the view but it will work also

[terreb]

First, I'm trying to set orientation of inner views (labels and button) inside slide horizontally. Second I'm setting blue color to make it obvious that the slider takes more than 100dpi on the screen. If you comment out the following:

<Label text="TEST" row="1" height="100%" backgroundColor="red"/>

...you should notice that.

Please run the code from my repo and see there. It's a your code bit changed, but there you should see the issue.

[terreb]

Have you had time to run the code from my repo and see the issue with the plugin?

[alexrainman]

I dont need to. I followed what you did:

• Set stacklayout background color to blue.
• Set orientation to horizontal (this doesnt work, i had same issue in xamarin)
• Add a 100dpi row for the carousel and another row for a red label below.

Everything works as expected. You must be doing something wrong on your end.

About horizontal stacklayout? No ide why it doesnt works. Use a grid instead.

[alexrainman]

I couldnt reproduce your issue with my own code. Will run your repo and find out the issue you are facing or what you are doing wrong. Thanks

[alexrainman]

I downloaded and run your repo. The plugin works as expected. I added interPageSpacing to illustrate that i can swipe between pages but elements inside each view are not requesting height in iOS. Horizontal StackLayout issue, not the plugin itself.

[terreb]

Hmm, strange, I changed the layout of the slide to GridLayout, but still unable to make the slide to take 100dpi in height:

If I put

<Label text="test" height="100" row="0" backgroundColor="blue"/>

instead of

<controls:CarouselView row="0" id="carouselView" position="0" templateSelector="{{ templateSelector }}" height="100" itemsSource="{{ itemsSource }}"/>

it takes 100dpi as expected:

I pushed this to my test repo, could you please have a look when you have time? What is incorrect there and how do I set the slider's height?

[terreb]

the plugin version is 2.0.4

[alexrainman]

I see you are declaring height="100" in the CarouselView xml. I cannot reproduce your problem even with your repo.