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

V4 alpha 4 card-columns cuts off cards on top and bottom #20654

Closed
bpierson opened this issue Sep 6, 2016 · 6 comments
Closed

V4 alpha 4 card-columns cuts off cards on top and bottom #20654

bpierson opened this issue Sep 6, 2016 · 6 comments
Labels
css v4
Milestone
v4.0.0-alpha.5

Comments

@bpierson
Copy link

bpierson commented Sep 6, 2016

With the release of V4 alpha 4, card-columns class truncates the top of the middle and right cards when the cards are of varying heights. The same behavior occurs on the bottom edge, although it appears to be the third column that is shown completely, with 1 and 2 being cut off.

card_cols_cutoff
@kevinruscoe
Copy link
Contributor

Browser? Also, are you using CSS columns?

@kennethn
Copy link

kennethn commented Sep 7, 2016

I'm seeing the same behavior, and also seeing it on the Bootstrap documentation site. I'm on Mac OS X Chrome beta channel (currently 53.0.2785.80 beta (64-bit)).

screen shot 2016-09-06 at 5 32 28 pm

@bpierson
Copy link
Author

bpierson commented Sep 7, 2016

I tested in IE 11, Firefox, Chrome on Windows 7. All the same. I'm just using the bootstrap.js and bootstrap.css from the dist folder, so whatever the default settings are.

@mdo
Copy link
Member

mdo commented Sep 7, 2016

Likely something to do with the display: block change we introduced in Alpha 4.

@mdo mdo added this to the v4.0.0-alpha.5 milestone Sep 7, 2016
@dpmontero
Copy link

captura de pantalla de 2016-09-07 07 58 19

Captured in official documentation

iamphill added a commit to iamphill/bootstrap that referenced this issue Sep 7, 2016
@iamphill
Fix cards cut of when in columns
a806d22 
This changes the cards to use `display: inline-block` when in columns to stop them
wrapping when in columns and therefore stopping them getting cut off.

Fixes twbs#20654
@iamphill iamphill mentioned this issue Sep 7, 2016
Closed
mdo added a commit that referenced this issue Sep 7, 2016
@mdo
Fix #20654 by reverting #20447
a3bde62 
Cards must be inline-block in columns, otherwise they can get split across columns
@mdo mdo mentioned this issue Sep 7, 2016
Merged
@mdo mdo closed this as completed in #20665 Sep 8, 2016
mdo added a commit that referenced this issue Sep 8, 2016
@mdo
Fix #20654 by reverting #20447 (#20665)
5713077 
Cards must be inline-block in columns, otherwise they can get split across columns
@mdo mdo mentioned this issue Sep 8, 2016
Closed
@dpmontero
Copy link

I have tried! Fixed!!

Thanks!

@danopz danopz mentioned this issue Sep 14, 2016
Closed
@rafalp rafalp mentioned this issue Sep 17, 2016
Closed
@mdo mdo mentioned this issue Oct 18, 2016
Closed
@glebez glebez mentioned this issue Oct 25, 2016
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css v4
Projects
None yet
Milestone
v4.0.0-alpha.5
Development

No branches or pull requests
5 participants
@mdo @kevinruscoe @kennethn @bpierson @dpmontero