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

Issue with using ExpandableTile within a Tab #9187

Closed
1 of 2 tasks
molyholy opened this issue Jul 12, 2021 · 1 comment · Fixed by #9593
Closed
1 of 2 tasks

Issue with using ExpandableTile within a Tab #9187

molyholy opened this issue Jul 12, 2021 · 1 comment · Fixed by #9593
Assignees

Comments

@molyholy
Copy link

molyholy commented Jul 12, 2021

What package(s) are you using?

  • carbon-components
  • carbon-components-react

Detailed description

Describe in detail the issue you're having.

The ExpandableTile component's default "unexpanded" state does not have the correct height when the page first renders. The below screenshot shows how they're way too short.
image

And the tile boxed in red shows what it's actually supposed to look like, with some elements AboveTheFold. You can "fix" this bug by expanding and collapsing the tile, but the user shouldn't have to do that to achieve the desired appearance.
image


After some poking around, it may have something to do with the Tabs and how the selected tab function works. By default, the first Tab ("Active") is selected, and the second "Upcoming" tab is not by default selected (and is where the ExpandableTiles are located).

This is how the page loads right now, with the "Active" Tab being the default selected Tab. You can see how the ExpandableTiles under the "Upcoming" Tab have the incorrect collapsed height, which can be fixed by expanding/collapsing it.
9d599280-db28-11eb-9e60-88e2a798e003

However, when the default selected Tab is "Upcoming," then the bug does not occur.
6d11f400-db28-11eb-88e1-fb20ffab73d4

It might have something to do with this line that calls getBoundingClientRect() because when I tried calling that function from the Inspector it always returned zeros for every dimension.

Is this issue related to a specific component?
ExpandableTile and Tabs

What browser are you working in?
Firefox

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
This is for the Commitments and Subscriptions page for the billing microservice.

Steps to reproduce the issue

  1. Go to https://test.cloud.ibm.com/billing/subscriptions
  2. Login with username orlando.mendoza1+sld_08@mail.test.ibm.com and password ServiceLD01!
  3. Click on the "Upcoming" Tab

Additional information

Link to another issue within IBM that documents this bug

@dakahn
Copy link
Contributor

dakahn commented Jul 12, 2021

Thanks for reporting with a thorough issue ticket!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants