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

Carousel caption misbehavior when there's insufficient room for the text #18140

Closed
moinakbarali opened this issue Nov 3, 2015 · 7 comments
Closed

Carousel caption misbehavior when there's insufficient room for the text #18140

moinakbarali opened this issue Nov 3, 2015 · 7 comments
Labels
confirmed css v3

Comments

@moinakbarali
Copy link

Docs says that carousel will automatically align captions and format it. but if we add large content into caption it does not align properly.
I thought it will get dynamic position like in Popovers and tooltip that have an option to align them automatically.
I look through carousel code and does not find anything that automatically align content within caption, so this section should not say that.
http://getbootstrap.com/javascript/#optional-captions
untitled
@cvrebert
Copy link
Collaborator

cvrebert commented Nov 3, 2015

Could you post a JS Bin or JSFiddle that demonstrates the misalignment?

@moinakbarali
Copy link
Author

https://output.jsbin.com/wahiji/1
check this on 320px width.

@twbs-lmvtfy
Copy link

Hi @moinakbarali!

You appear to have posted a live example (https://jsbin.com/cuhoyaduli/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

  • W002: <head> is missing X-UA-Compatible <meta> tag that disables old IE compatibility modes
  • W003: <head> is missing viewport <meta> tag that enables responsiveness

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@cvrebert
Copy link
Collaborator

cvrebert commented Nov 4, 2015

So, the actual bug seems to be that slide images aren't centered when they're narrower than the carousel itself.

@cvrebert cvrebert changed the title Carousel captions alignment Carousel images not horizontally centered when they're narrower than the carousel Nov 4, 2015
@cvrebert cvrebert added the v4 label Nov 4, 2015
@bassjobsen
Copy link
Contributor

As far as i do understand @moinakbarali; the only problem is that the text is too long to fit the carousel?
Possible related: #18171

@moinakbarali
Copy link
Author

Yes @bassjobsen is correct. But as the carousel doc say that it will align content automatically it should handle long text someway or it should not say that it will align content automatically.

@cvrebert that is also an issue, I fixed them using margin: 0 auto or by adding centered-block class to image.

@cvrebert cvrebert changed the title Carousel images not horizontally centered when they're narrower than the carousel Carousel caption misbehavior when there's insufficient room for the text Nov 5, 2015
@cvrebert cvrebert removed the v4 label Nov 5, 2015
@cvrebert
Copy link
Collaborator

cvrebert commented Nov 5, 2015

Closing this as a duplicate of #18171 then.
I'll open a new issue for the image centering problem.

@cvrebert cvrebert closed this as completed Nov 5, 2015
@cvrebert cvrebert mentioned this issue Nov 5, 2015
Closed
@cvrebert cvrebert mentioned this issue Nov 15, 2015
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
confirmed css v3
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@cvrebert @bassjobsen @moinakbarali @twbs-lmvtfy