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

Tabs on left are changing width when content change #4024

Closed
maspychaj-sage opened this issue May 14, 2021 · 4 comments · Fixed by #4202
Closed

Tabs on left are changing width when content change #4024

maspychaj-sage opened this issue May 14, 2021 · 4 comments · Fixed by #4202
Labels
Bug On Backlog released Squad Nebula

Comments

@maspychaj-sage
Copy link
Contributor

Current behaviour

When text in tab is longer then space in the tab it make content narrower.
image

Expected behaviour

Tab width should be the same width for any content.

Reproducible example

https://codesandbox.io/s/objective-fog-0t19d?file=/src/index.js

Suggested solution(s)

Prop for set width of tabs or max width.

Your environment

Software Version(s)
carbon-react 74.0.0
react-scripts 4.0.3
React 16.14.0
Browser any
Operating System any
@maspychaj-sage maspychaj-sage added Bug triage Triage Required labels May 14, 2021
@samtjo
Copy link
Contributor

samtjo commented May 20, 2021

@maspychaj-sage what's the use case for having two sets of tabs on top of one another?

@maspychaj-sage
Copy link
Contributor Author

@maspychaj-sage what's the use case for having two sets of tabs on top of one another?

I've got two Tabs on two different pages and it's not consistent when you change pages. It's not possible to have the same layout when tabs strings are longer.

@nicktitchmarsh
Copy link
Contributor

FE-4161 has been raised to address the width of the tabs

@dawidzarzycki dawidzarzycki mentioned this issue Jun 28, 2021
Merged
8 tasks
dawidzarzycki pushed a commit that referenced this issue Jul 1, 2021
feat(tabs): add tabsHeaderWidth prop
b76b8a7 
`tabsHeaderWidth` prop will set a width to `TabsHeader` component.
It will allow users with very long title to make well aligned `Tabs`
if there will be more of tabs group than one

fixes: #4024
carbonci pushed a commit that referenced this issue Jul 6, 2021
@semantic-release-bot @carbonci
chore(release): 77.6.0
ceb2a5e 
## [77.6.0](v77.5.0...v77.6.0) (2021-07-06)

### Features

* **tabs:** add tabsHeaderWidth prop ([b76b8a7](b76b8a7)), closes [#4024](#4024)
@carbonci
Copy link
Collaborator

carbonci commented Jul 6, 2021

🎉 This issue has been resolved in version 77.6.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug On Backlog released Squad Nebula
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(tabs): add headerWidth prop (FE-4161) Sage/carbon
4 participants
@samtjo @carbonci @nicktitchmarsh @maspychaj-sage