Skip to content
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.

Sign up for GitHub

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

Jump to bottom

ngbCarousel - showNavigationIndicators not working #4253

Closed
kettunen opened this issue Feb 15, 2022 · 2 comments · Fixed by #4259
Closed

ngbCarousel - showNavigationIndicators not working #4253

kettunen opened this issue Feb 15, 2022 · 2 comments · Fixed by #4259
Labels
component: carousel type: bug type: regression
Milestone
12.0.1

Comments

@kettunen
Copy link

kettunen commented Feb 15, 2022 •
edited

Bug description:

After updating to ng-bootstrap 12 navigation indicators not showing any more in ngbCarousel.

Link to minimally-working StackBlitz that reproduces the issue:

Go to https://ng-bootstrap.github.io/#/components/carousel/examples and click "Toggle Navigation Indicators" and nothing happens.

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 13.2.2

ng-bootstrap: 12.0.0

Bootstrap: 5.1.3
fbasso added a commit to fbasso/ng-bootstrap that referenced this issue Feb 16, 2022
@fbasso
fix(carousel): indicators not visible
3f4486c 
fix ng-bootstrap#4253
@fbasso fbasso mentioned this issue Feb 16, 2022
Closed
fbasso added a commit to fbasso/ng-bootstrap that referenced this issue Feb 16, 2022
@fbasso
fix(carousel): indicators not visible
f0854cf 
fix ng-bootstrap#4253
fbasso added a commit to fbasso/ng-bootstrap that referenced this issue Feb 16, 2022
@fbasso
fix(carousel): indicators not visible (ng-bootstrap#4253)
f212496 
fix ng-bootstrap#4253
fbasso added a commit to fbasso/ng-bootstrap that referenced this issue Feb 16, 2022
@fbasso
fix(carousel): indicators not visible (ng-bootstrap#4254)
8d6993c 
fix ng-bootstrap#4253
fbasso added a commit to fbasso/ng-bootstrap that referenced this issue Feb 16, 2022
@fbasso
fix(carousel): indicators not visible (ng-bootstrap#4254)
622b8be 
fix ng-bootstrap#4253
fbasso added a commit to fbasso/ng-bootstrap that referenced this issue Feb 16, 2022
@fbasso
fix(carousel): indicators not visible (ng-bootstrap#4254)
6b196f2 
fix ng-bootstrap#4253
@maxokorokov maxokorokov added this to the 12.0.1 milestone Feb 17, 2022
@diegolaisocialcities
Copy link

I also encountered this bug and analyzing the code in the dev console, I noticed that the problem is not on the Javascript/Typescript side but on the CSS side, the "li" elements are initialized but have a size of 0x0px, change their width and height and it should work! Initially I also used "background color: yellow !important" to understand where they were, if it can help.

@divdavem
Copy link
Member

This is the same issue as #4200

maxokorokov added a commit to maxokorokov/ng-bootstrap that referenced this issue Feb 22, 2022
@maxokorokov
fix(carousel): fix hidden carousel indicators
0033c78 
- In Bootstrap 5 the CSS selector matching indicators has changed and included `data-bs-target` attribute that we were missing
- Recommended carousel markup changed from using `ul`, `li` and `a` to using `button` elements
- Had to refactor tests as selectors were not precise enough

On Bootstrap side see:
- twbs/bootstrap#32661
- twbs/bootstrap#32627

Fixes ng-bootstrap#4200
Fixes ng-bootstrap#4253
@maxokorokov maxokorokov mentioned this issue Feb 22, 2022
Merged
maxokorokov added a commit that referenced this issue Feb 23, 2022
@maxokorokov
fix(carousel): fix hidden carousel indicators (#4259)
bee2668 
- In Bootstrap 5 the CSS selector matching indicators has changed and included `data-bs-target` attribute that we were missing
- Recommended carousel markup changed from using `ul`, `li` and `a` to using `button` elements
- Had to refactor tests as selectors were not precise enough

On Bootstrap side see:
- twbs/bootstrap#32661
- twbs/bootstrap#32627

Fixes #4200
Fixes #4253
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: carousel type: bug type: regression
Projects
None yet
Milestone
12.0.1
5 participants
@divdavem @fbasso @maxokorokov @kettunen @diegolaisocialcities