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

Same height in CardSectionSimple broken, and same vertical position for header, body and CTA #4311

Closed
aiproulx opened this issue Oct 26, 2020 · 0 comments
Closed

Same height in CardSectionSimple broken, and same vertical position for header, body and CTA #4311

aiproulx opened this issue Oct 26, 2020 · 0 comments
Assignees
@kennylam
Labels
adopter: Docs/KC used when component or pattern will be used by this adopter adopter support bug Something isn't working dev Needs some dev work package: react Work necessary for the Carbon for IBM.com react components package
Milestone
Sprint 20-23

Comments

@aiproulx
Copy link

https://ibm-content-coe.slack.com/archives/C2PLX8GQ6/p1603482313163700

Title line template: [Title]: Brief description

The CardSectionSimple sample code is not great for exposing this issue because the text labels are all the same (copy/paste).

But with different length of header, body and footer text, the cards do not align to the same height.

Detailed description

Describe in detail the issue you're having.

On the screen capture there is a gap at the bottom of the first two cards. Same height is not achieved with this component.

Is this issue related to a specific component?

CardSectionSimple, and may be other CardGroup

What browser are you working in?

Chrome

What version of Carbon for IBM.com are you using?

Latest

Steps to reproduce the issue

  1. Go here: https://ibmdotcom-react.mybluemix.net/?path=/story/components-cardsectionsimple--default
  2. scale your browser so the header of the third card wraps.
  3. notice the gaps at the bottom of the first two cards.

Additional information

image

  • Screenshots or code
  • Notes
@aiproulx aiproulx added the bug Something isn't working label Oct 26, 2020
@aiproulx aiproulx changed the title Same height in CardSectionSimple broken Same height in CardSectionSimple broken, and same vertical position for header body and CTA Oct 27, 2020
@aiproulx aiproulx changed the title Same height in CardSectionSimple broken, and same vertical position for header body and CTA Same height in CardSectionSimple broken, and same vertical position for header, body and CTA Oct 27, 2020
@RobertaJHahn RobertaJHahn added adopter support adopter: Docs/KC used when component or pattern will be used by this adopter labels Oct 27, 2020
@RobertaJHahn RobertaJHahn added this to the Sprint 20-22 milestone Oct 27, 2020
@RobertaJHahn RobertaJHahn added dev Needs some dev work package: react Work necessary for the Carbon for IBM.com react components package labels Nov 10, 2020
This was referenced Nov 12, 2020
Closed
Merged
kodiakhq bot pushed a commit that referenced this issue Nov 13, 2020
@kennylam
fix(cardgroup): update sameheight selectors (#4484)
0a25048 
### Related Ticket(s)

#4311 

### Description

Fixes an issue where elements were not being targeted by `sameHeight`.

### Changelog

**Changed**

- update CSS selectors for `sameHeight`
- update card data for Storybook


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kennylam kennylam

Labels
adopter: Docs/KC used when component or pattern will be used by this adopter adopter support bug Something isn't working dev Needs some dev work package: react Work necessary for the Carbon for IBM.com react components package
Projects
None yet
Milestone
Sprint 20-23
Development

No branches or pull requests
6 participants
@kennylam @jeffchew @aiproulx @ljcarot @RobertaJHahn @jacobottesen-dgc