pageIndicators not showing #5

zoeitsolutions · 2017-01-10T12:40:55Z

Thanks for the plugin, I can't get the pageIndicators to show.

I followed the readme:

Indicators

If the property pageIndicators is true you won't see the page indicators anymore as of 2.0.0 right away. there are two css classes exposed that you can setup however you like for active and inactive indicators. below is an example for semi translucent dots.

.slide-indicator-inactive{
    background-color: #fff;
    opacity : 0.4;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

.slide-indicator-active{
    background-color: #fff;
    opacity : 0.9;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

I simply copied and pasted those into my slide.component.css file (which holds other classes for the component).

The other classes do pick up, I have tried setting the page bg to white or dark colours, but I still can't see any dots.

slide.component.html

I have tried with and without the gridlayout / button at the bottom of the page. I have also tried increasing the size of the pageIndicators and removing opacity without any luck.

Thoughts?

The text was updated successfully, but these errors were encountered:

YvesCandel · 2017-01-11T09:33:36Z

I'm having the same problem. Can't get them to show in any way.

smarza · 2017-01-21T00:38:44Z

Me too.

zoeitsolutions · 2017-01-21T10:36:58Z

@TheOriginalJosh please let me know if you are able to fix this or advise what the problem might be.

smarza · 2017-01-23T21:37:54Z

If I set <slides [pageIndicators]="true">, i get the following error:

JS: clipToBounds with value false is not supported on Android. You can use this.android.getParent().setClipChildren(false) as an alternative.

Does anyone have any idea how to fixed this issue ?

Thanks in advance.

JoshDSommer · 2017-01-24T12:02:54Z

@smarza I'll fix this tonight.

smarza · 2017-01-24T12:06:27Z

@TheOriginalJosh Thanks.
If there is anything I can help or contribute, please let me know.

zoeitsolutions · 2017-02-01T06:51:58Z

@TheOriginalJosh was this fixed?

pette9 · 2017-02-16T15:52:09Z

I am experiencing this problem on version 0.0.9.

gauravbabu74 · 2017-03-21T06:53:38Z

I'm having the same problem. Can't get them to show in any way.

cmeijerink · 2017-05-17T13:57:07Z

Same issue here!

JoshDSommer · 2017-05-18T12:28:32Z

I'll look into this tonight

Jaishankarb · 2017-05-24T06:53:30Z

@TheOriginalJosh any update on this issue

JoshDSommer · 2017-05-24T11:00:04Z

@Jaishankarb not yet, I haven't had much free time to dedicate to it unfortunately.

dobjek · 2017-06-12T19:00:28Z

any update on this issue?

ivanwitzke · 2017-06-12T19:47:38Z

same problem here...

JoshDSommer · 2017-06-20T23:49:55Z

these should be working now for android and ios version 1.4. going to close this one. if you have any problems don't hesitate to open back up.

carlosanjos · 2017-06-21T15:42:36Z

Sorry @TheOriginalJosh I've just updated to 0.1.4 and the indicators are still now showing, for both iOS and Android.

JoshDSommer · 2017-06-21T15:44:58Z

@carlosanjos page indicators are not on by default. You will need to make to set the property pageIndicators to true like this:

    <slides loop="true" [pageIndicators]="true">
        <slide class="slide-1">
            <Label text="Slide 1" textWrap="true"></Label>

and then add styling for them in your app.css or component css.

   background-color: #fff;
   opacity : 0.4;
   width : 10;
   height : 10;
   margin-left : 2.5;
   margin-right : 2.5;
   margin-top : 0;
   border-radius : 5;
}

.slide-indicator-active{
   background-color: #fff;
   opacity : 0.9;
   width : 10;
   height : 10;
   margin-left : 2.5;
   margin-right : 2.5;
   margin-top : 0;
   border-radius : 5;
}

without both of these steps. page indicators won't display.

carlosanjos · 2017-06-21T15:56:10Z

@TheOriginalJosh I'm using the following code and it doesn't work.
Thanks for the fast reply.

<slides [loop]="false" [pageIndicators]="true" class="slide-bg">
    <slide class="slide-1"><Label text="Heading 1" class="slide-heading h1"></Label>
        <Image src="https://placeholdit.imgix.net/~text?txtsize=19&bg=ffffff&txt=200%C3%97200&w=200&h=200"></Image>
    </slide>
    <slide class="slide-2"><Label text="Heading 2" class="slide-heading h1"></Label>
        <Image src="https://placeholdit.imgix.net/~text?txtsize=19&bg=ffffff&txt=200%C3%97200&w=200&h=200"></Image>
    </slide>
    <slide class="slide-3"><Label text="Heading 3" class="slide-heading h1"></Label>
        <Image src="https://placeholdit.imgix.net/~text?txtsize=19&bg=ffffff&txt=200%C3%97200&w=200&h=200"></Image>
    </slide>
</slides>

.slide-1{
    background-color: darkslateblue;
}
.slide-2{
    background-color: darkcyan;
}
.slide-3{
    background-color: darkgreen;
}
Label{
    text-align: center;
    width: 100%;
    font-size: 35;
    margin-top: 35;
    color: red;

}

.slide-indicator-inactive{
    background-color: #fff;
    opacity : 0.4;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

.slide-indicator-active{
    background-color: #fff;
    opacity : 0.9;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

JoshDSommer · 2017-06-21T16:33:51Z

@carlosanjos I just tested your code on an android emulator and I'm seeing the background color and the slide indicators. I'm not on a mac at the moment so I can't test on an ios emulator. but it seems that the background colors are not showing up correctly for you. maybe try changing them to a hexadecimal color like #000?

dobjek · 2017-06-23T02:17:53Z

Doesn't show for me either. I have image as the component's background, might that be a problem?

JoshDSommer · 2017-06-23T11:28:23Z

@dobjek it very well could be the image. that is something I haven't really thought of . if you put the default code in from the README do the indicators show up?

sittingbool · 2017-06-23T12:29:40Z

I just started the demo project, added the styles to the app.css but no indicators showing up. (set the property to true of course). Running on iOS.

JoshDSommer · 2017-06-23T12:35:48Z

@sittingbool make sure you set the pageIndicators property to true in the slides component
<slides [pageIndicators]="true" class="slide-bg">

JoshDSommer · 2017-06-23T12:54:05Z

@sittingbool alternatively it could be an issue with the slides being generated in a ngFor loop in the demo project. you may want to try have the slides statically defined and see if that works.

sittingbool · 2017-06-26T07:39:03Z

I had this property on true, I also had a colored background. But still not showing. Also I tried doing the slides manually, because that would be my use case. Didn't work. If I find the time I will work on this and give you a pull request. Tell me if you find the time to have a look.

JoshDSommer · 2017-06-26T11:25:11Z

@sittingbool What version of NativeScript and Angular are you running?

sittingbool · 2017-06-26T11:31:10Z

The latest NativeScript (3.0.3) and Angular like in the package.json of the demo App. I used the demo App provided by this repository. I downloaded as a zip, changed the absolute path to the slides-project into a relative path, added [pageIndicators]="true", the css like in the readme and ran it with tns run ios. No indicators visible. Then I added background-color but still: no indicators visible.

JoshDSommer · 2017-06-28T00:40:02Z

@sittingbool one thing you may want to try doing is setting the margin-top property to a lower or negative number. the positioning top seems to be inconsistent and I'm going to need to work on it.

dobjek · 2017-06-28T03:03:13Z

i believe this is why we are not seeing those pageIndicators:
NativeScript/nativescript-angular#769

dobjek · 2017-06-28T03:17:39Z

so, temp workaround is to put .slide-indicator-inactive and .slide-indicator-active to your app.css

ivanwitzke · 2017-07-07T20:49:37Z

For me it 'kinda' works with the code like this (and css as the doc examples on my app.css):

<GridLayout rows="10, auto" columns="50, auto">
    <Label text="Photos" row="0" col="0"></Label>
    <StackLayout row="1" colSpan="2">
        <slides [pageIndicators]="true">
            <slide *ngFor="let photo of product.photos" class="slide-bg">
                <FrescoDrawee [imageUri]="photo" height="250" actualImageScaleType="fitCenter"></FrescoDrawee>
            </slide>
        </slides>
    </StackLayout>
</GridLayout>

but the result is like the images below...

JoshDSommer · 2017-07-09T13:54:02Z

@ivanwitzke Thank you for the info. this makes sense since i'm calculating the position of the indicators based on the view height not the height of the slides themselves. going to have to go back to the drawing board on this I think.

ivanwitzke · 2017-07-09T22:11:43Z

Also, if it's inside a ScrollView the bullets appear too, but need to scroll a little bit... Em dom, 9 de jul de 2017 10:54, Josh Sommer <notifications@github.com> escreveu:

…

@ivanwitzke <https://github.com/ivanwitzke> Thank you for the info. this makes sense since i'm calculating the position of the indicators based on the view height not the height of the slides themselves. going to have to go back to the drawing board on this I think. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEM96ct4PPgUy7w_a4Inp_QjG_ZVD18Gks5sMNt7gaJpZM4LfXaD> .

KBorecki · 2017-07-20T16:11:42Z

Hey @TheOriginalJosh is there any update of this issue?

JoshDSommer · 2017-07-20T16:37:32Z

@KBorecki , @dobjek made a PR (#28) to fix this a while ago and I've currently published it under a beta tag. You can install it with npm install nativescript-ngx-slides@beta. any feed back would be helpful.

ivanwitzke · 2017-07-20T17:24:23Z

Unfortunatelly for me nothing has changed... If the device is on vertical, the indicators won't show, but if I rotate to horizontal, then they appear.
The basic structure of the view is:

StackLayout -> ScrollView -> CardView -> GridLayout -> StackLayout ->

<slides [pageIndicators]="true">
    <slide *ngFor="let photo of product.photos" class="slide-bg">
        <FrescoDrawee [imageUri]="photo" height="250" actualImageScaleType="fitCenter"></FrescoDrawee>
    </slide>
</slides>

JoshDSommer · 2017-07-20T17:45:47Z

@ivanwitzke this is installed from the beta tag? npm install nativescript-ngx-slides@beta?

ivanwitzke · 2017-07-20T18:28:00Z

@TheOriginalJosh yes... but I just noticed that after installing from the beta tag (npm install nativescript-ngx-slides@beta), the console shows

/the/path/to/my/project
└── nativescript-ngx-slides@0.3.1

is this correct?

JoshDSommer · 2017-07-20T18:33:10Z

@ivanwitzke yep that is correct. Thanks for the info.

ivanwitzke · 2017-07-21T19:24:38Z

After setting the pageHeigth property in the <slides> the indicators show now, but if I rotate the device, then rotate it back, they won't show until I navigate away and come back to the page...

<slides [pageIndicators]="true" pageHeight="350">
    [more code here...]
</slides>

sittingbool · 2017-07-22T08:40:37Z

Now setting a negative top margin for the slide-indicator-inactive and slide-indicator-active classes shows the indicators on ios, while a zero top margin shows it on android. i suggest to use an absolute positioning to make sure its on top of the slides as well.

nikunjgajera · 2017-11-25T07:21:50Z

I have same issues, I cant get page indicator

slides.html

<slides [pageIndicators]="true" id="slides" #slides pageHeight="420">
    <slide *ngFor="let page of noOfPage">
        
        <StackLayout >
            <GridLayout rows="*,*,*,*,*,*" cols="10,16,16,16,16,16,10" >
            [Some Code....]
            </GridLayout>
      </StackLayout>
    </slide>
</slides>

slides.component.ts


export class SlidesComponent implements OnInit {
    players : Array<Player> = [];
   constructor(private router: Router, private page: Page) {
    }
    @ViewChild("slides") slides: ElementRef;
    ngOnInit() {
        this.page.actionBarHidden = true;
        this.page.backgroundImage = "res://hurling";
    }
    handlePlayer() {
        //Call api and get data
        this.players = data;
    }    
   ngAfterViewInit() {

        this.handlePlayer();
    }
}

slides.common.css

.slide-indicator-inactive{
    background-color: #000;
    opacity : 0.4;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

.slide-indicator-active{
    background-color: #000;
    opacity : 0.9;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

how can i get page indicator?

heese · 2018-02-09T00:54:46Z

I had also problems with the page indicators. They are perfectly fine when starting the app. However, they disappeared when resuming my app from the background.

I had to change the code of the plugin to make it work. I found that setting the top margin does funny stuff when resuming from background. I did not investigate why. I changed the following line in buildFooter() from
footerSection.marginTop = this.footerMarginTop;
to
footerSection.top = this.footerMarginTop;

For my app I changed also the formula for computing marginTop (otherwise the footer was too low when setting pageHeight). New formula is
return pageHeight - (pageHeight / 6) - this.FOOTER_HEIGHT / 2;

I have not tested if the above formula works also for other page heights.

Here is another fix I applied to make page indicators working on Android. I added another StackLayout around the label. The new template is

<StackLayout *ngIf="pageIndicators" #footer style="width:100%;" orientation="horizontal">
    <StackLayout *ngFor="let indicator of indicators">
        <Label [class.slide-indicator-active]="indicator.active == true"
               [class.slide-indicator-inactive]="indicator.active == false"></Label>
    </StackLayout>
</StackLayout>

I haven't tested if it would work without the additional stack layout after applying the margin fix.

Still waiting for a spare time-slot to create a pull request and do more testing :-|

anuragd7 · 2018-05-15T10:22:38Z

I too faced quite a few problems in making the page indicators appear. Finally, I experimented with different values of pageHeight and footerMarginTop properties and what worked for me was:

<GridLayout  rows="50% *" >
        <slides row="0" [pageIndicators]="true" pageHeight="80%" footerMarginTop="70%">

vahidvdn · 2018-08-03T10:32:11Z

I just added theses css codes in my app.android.css:

.slide-indicator-inactive{
    background-color: #000;
    opacity : 0.4;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

.slide-indicator-active{
    background-color: #000;
    opacity : 0.9;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

This must be mentioned in the docs.

vahidvdn · 2018-08-27T12:15:17Z

Also you must set footerMarginTop property to something less than 100%. For example:

footerMarginTop="80%"

KirilOkun · 2019-10-18T03:24:48Z

Setting .slide-indicator-inactive and .slide-indicator-active margin-top: -1; and <slides ... pageHeight="100%"> worked for me. The indicators showed up but at the top of the page above the slides. Better than nothing i suppose.

JoshDSommer closed this as completed May 24, 2017

JoshDSommer reopened this May 24, 2017

JoshDSommer closed this as completed Jun 20, 2017

JoshDSommer reopened this Jun 23, 2017

ivanwitzke mentioned this issue Nov 30, 2017

Page indicators not showing up #39

Open

pageIndicators not showing #5

pageIndicators not showing #5

Comments

zoeitsolutions commented Jan 10, 2017 • edited Loading

YvesCandel commented Jan 11, 2017

smarza commented Jan 21, 2017

zoeitsolutions commented Jan 21, 2017

smarza commented Jan 23, 2017

JoshDSommer commented Jan 24, 2017

smarza commented Jan 24, 2017

zoeitsolutions commented Feb 1, 2017

pette9 commented Feb 16, 2017

gauravbabu74 commented Mar 21, 2017

cmeijerink commented May 17, 2017

JoshDSommer commented May 18, 2017

Jaishankarb commented May 24, 2017

JoshDSommer commented May 24, 2017

dobjek commented Jun 12, 2017

ivanwitzke commented Jun 12, 2017

JoshDSommer commented Jun 20, 2017 • edited Loading

carlosanjos commented Jun 21, 2017

JoshDSommer commented Jun 21, 2017 • edited Loading

carlosanjos commented Jun 21, 2017

JoshDSommer commented Jun 21, 2017

dobjek commented Jun 23, 2017 • edited Loading

JoshDSommer commented Jun 23, 2017

sittingbool commented Jun 23, 2017 • edited Loading

JoshDSommer commented Jun 23, 2017

JoshDSommer commented Jun 23, 2017

sittingbool commented Jun 26, 2017

JoshDSommer commented Jun 26, 2017

sittingbool commented Jun 26, 2017

JoshDSommer commented Jun 28, 2017

dobjek commented Jun 28, 2017

dobjek commented Jun 28, 2017

ivanwitzke commented Jul 7, 2017

JoshDSommer commented Jul 9, 2017

ivanwitzke commented Jul 9, 2017 via email

KBorecki commented Jul 20, 2017

JoshDSommer commented Jul 20, 2017 • edited Loading

ivanwitzke commented Jul 20, 2017

JoshDSommer commented Jul 20, 2017

ivanwitzke commented Jul 20, 2017 • edited Loading

JoshDSommer commented Jul 20, 2017

ivanwitzke commented Jul 21, 2017

sittingbool commented Jul 22, 2017

nikunjgajera commented Nov 25, 2017

heese commented Feb 9, 2018

anuragd7 commented May 15, 2018

vahidvdn commented Aug 3, 2018

vahidvdn commented Aug 27, 2018

KirilOkun commented Oct 18, 2019

zoeitsolutions commented Jan 10, 2017 •

edited

Loading

JoshDSommer commented Jun 20, 2017 •

edited

Loading

JoshDSommer commented Jun 21, 2017 •

edited

Loading

dobjek commented Jun 23, 2017 •

edited

Loading

sittingbool commented Jun 23, 2017 •

edited

Loading

JoshDSommer commented Jul 20, 2017 •

edited

Loading

ivanwitzke commented Jul 20, 2017 •

edited

Loading