-
Notifications
You must be signed in to change notification settings - Fork 34
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
pageIndicators not showing #5
Comments
I'm having the same problem. Can't get them to show in any way. |
Me too. |
@TheOriginalJosh please let me know if you are able to fix this or advise what the problem might be. |
If I set <slides [pageIndicators]="true">, i get the following error:
Does anyone have any idea how to fixed this issue ? Thanks in advance. |
@smarza I'll fix this tonight. |
@TheOriginalJosh Thanks. |
@TheOriginalJosh was this fixed? |
I am experiencing this problem on version 0.0.9. |
I'm having the same problem. Can't get them to show in any way. |
Same issue here! |
I'll look into this tonight |
@TheOriginalJosh any update on this issue |
@Jaishankarb not yet, I haven't had much free time to dedicate to it unfortunately. |
any update on this issue? |
same problem here... |
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. |
Sorry @TheOriginalJosh I've just updated to 0.1.4 and the indicators are still now showing, for both iOS and Android. |
@carlosanjos page indicators are not on by default. You will need to make to set the property pageIndicators to true like this:
and then add styling for them in your app.css or component css.
without both of these steps. page indicators won't display. |
@TheOriginalJosh I'm using the following code and it doesn't work.
|
@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? |
Doesn't show for me either. I have image as the component's background, might that be a problem? |
@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? |
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. |
@sittingbool make sure you set the pageIndicators property to true in the slides component |
@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. |
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. |
@sittingbool What version of NativeScript and Angular are you running? |
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. |
@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. |
i believe this is why we are not seeing those pageIndicators: |
so, temp workaround is to put .slide-indicator-inactive and .slide-indicator-active to your app.css |
For me it 'kinda' works with the code like this (and css as the doc examples on my app.css):
|
@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. |
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>
.
|
Hey @TheOriginalJosh is there any update of this issue? |
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. StackLayout -> ScrollView -> CardView -> GridLayout -> StackLayout ->
|
@ivanwitzke this is installed from the beta tag? npm install nativescript-ngx-slides@beta? |
@TheOriginalJosh yes... but I just noticed that after installing from the beta tag (
is this correct? |
@ivanwitzke yep that is correct. Thanks for the info. |
After setting the
|
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. |
I have same issues, I cant get page indicator slides.html
slides.component.ts
slides.common.css
how can i get page indicator? |
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 For my app I changed also the formula for computing 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
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 :-| |
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:
|
I just added theses css codes in my app.android.css:
This must be mentioned in the docs. |
Also you must set
|
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. |
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.
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
<GridLayout columns="*" rows="*, auto" class="slide-bg"> <StackLayout col="0" row="0"> <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> </StackLayout> <StackLayout col="0" row="1"> <Button text="Get Started" class="submit-button h2" height="80" (tap)="goToLogin()"></Button> </StackLayout> </GridLayout>
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: