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 do not wrap nicely if there is not enough space for them #1228

Open
36degrees opened this issue Feb 28, 2019 · 3 comments
Open

Tabs do not wrap nicely if there is not enough space for them #1228

36degrees opened this issue Feb 28, 2019 · 3 comments
Labels
design tabs

Comments

@36degrees
Copy link
Contributor

Where there is not enough space for all of the tabs, the tabs just wrap onto a new line.

As seen on the GOV.UK bank holidays page in landscape on an iPhone X. This can also be seen when resizing on desktop between 641px and ~826px.

img_6699
@dashouse dashouse added the awaiting triage Needs triaging by team label Mar 1, 2019
@hannalaakso hannalaakso removed the awaiting triage Needs triaging by team label Mar 1, 2019
@NickColley
Copy link
Contributor

We could consider using flexbox for this, but it should be tested with examples of a few tabs, and many tabs.

@edwardhorsford
Copy link
Contributor

A related issue is that the wrapped button moves about depending on which tab is selected:

tabs-wrap-move

Note in the video the inactive tabs have a grey background - but this isn't visible in the gif.

@edwardhorsford
Copy link
Contributor

I just ran across this again today.

Screenshot 2022-08-19 at 14 46 16

@romaricpascal romaricpascal mentioned this issue Jul 22, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
design tabs
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@36degrees @timpaul @edwardhorsford @NickColley @hannalaakso @dashouse @kellylee-gds