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.

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

card-columns card over-flow content is not visible #20161

Closed
raghuam opened this Issue Jun 23, 2016 · 11 comments

Comments

Projects
None yet
2 participants
@raghuam
Copy link

raghuam commented Jun 23, 2016

v4-alpha .card-columns .card (over-flow content is not visible) i want show more details content in position absolute element inside card, but its visible out side the card?

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 23, 2016

Please post a JS Bin or other live example that demonstrates the problem.
We can't debug screenshots.

@raghuam

This comment has been minimized.

Copy link
Author

raghuam commented Jun 24, 2016

Hi,

here is the basic bootstrap cards, JS Bin link http://jsbin.com/solozuyofe/1/edit?html,css,output

basically ".absolute-content" div going below the other cards, i wonder position:absolute; why its not working in .card-columns .cards...

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 24, 2016

@raghuam What browser and OS are you using?
In OS X Chrome, the red boxes aren't below the cards, they just exceed the width of the card and their text gets cut off. If I remove the width: 600px; style from your example, the red boxes get displayed in a reasonable way (fit to the bounds of the card; text line-wraps properly).

@raghuam

This comment has been minimized.

Copy link
Author

raghuam commented Jun 27, 2016

@cvrebert Im checking in windows 8 chrome and Mozilla Firefox.
the red box position absolute i want to show bigger than card size, when we have position absolute that can be overlap with parent relative container ? but in this cards its showing only inside the card, i want t show content bigger than card size, please check and let me know how i can fix this issue....

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 27, 2016

Reduced testcase: http://jsbin.com/yovihuf/1/edit?html,css,output
Chrome, Safari, and Edge 13 all clip the position:absolute child at the middle of the column gap.
Firefox doesn't clip it, but draws the 2nd and 3rd columns on top of it (with regard to the z-axis).

@raghuam

This comment has been minimized.

Copy link
Author

raghuam commented Jun 27, 2016

Is there any fix can be done ?

@cvrebert cvrebert added browser bug and removed awaiting reply labels Jun 27, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 27, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 27, 2016

Is there any fix can be done ?

Assuming you mean "Then how do I make my position:absolute element get displayed wider than the boundaries of its column?", it's unclear whether it's possible to accomplish that using CSS3 Multi-column Layout.

Unfortunately, we don't really answer "how-to" questions on this issue tracker. For further assistance with this, try asking the community on StackOverflow, IRC, or Slack. See https://github.com/twbs/bootstrap/blob/v4-dev/README.md#community for links.
Good luck.

@raghuam

This comment has been minimized.

Copy link
Author

raghuam commented Jun 27, 2016

@cvrebert its bug with cards columns? position:absolute element get displayed wider than the boundaries of its card.

@cvrebert cvrebert added this to the v4.0.0-alpha.3 milestone Jun 27, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 27, 2016

The bug lies in the web browser(s), as opposed to Bootstrap. .card-columns is implemented using CSS Multi-column Layout Module Level 1. Specifically:

@media (min-width: 544px) {
  .card-columns {
    -moz-column-count: 3;
    column-count: 3;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
  }
}

All major browsers except Firefox currently clip your .absolute-content to the boundaries of the column it's within. It's not clear to me whether Firefox or Chrome/Safari/Edge is correct according to the standard here.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 27, 2016

Added to the Wall of Browser Bugs in #20183.

@cvrebert cvrebert closed this Jun 27, 2016

cvrebert added a commit that referenced this issue Jun 27, 2016

Port #20183 to v3
Add Wall of Browser Bugs entry for #20161 (#20183)

Refs https://bugzilla.mozilla.org/show_bug.cgi?id=1282363
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.