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

Fix <mwc-tab-bar> layout issue in Firefox #349

Merged
merged 1 commit into from Aug 7, 2019
Merged

Fix <mwc-tab-bar> layout issue in Firefox #349

merged 1 commit into from Aug 7, 2019

Conversation

aomarks
Copy link
Collaborator

@aomarks aomarks commented Aug 7, 2019

If an <mwc-tab-bar>'s container doesn't fit the bar with all its tabs, then the tabs should not overflow the container, and should automatically scroll horizontally so that the selected tab is displayed, like this:

image

This is what we get in in Chrome 76. But in Firefox 68, we get this:

image

Changing the style to :host { display: block; } makes the behavior match. There seems to be an inconsistency between Firefox and Chrome here -- maybe a Firefox bug? Changing display to any of: unset, block, or inline works, but flex-inline has the same problem.

I'm also wondering why we put display:flex on the host anyway? My (very possibly wrong) understanding was that display:flex is equivalent to display:block in terms of the layout of the flex container itself (where display: inline-flex would be the equivalent where the flex container is inline), and also that display wouldn't be inherited to any children in the shadow root, so it should have no effect there. If that's true, it doesn't seem that display:flex does anything useful vs display:block?

Repro:

<!doctype html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        width: 225px;
      }
      /* uncomment below to fix */
      /*
      mwc-tab-bar {
        display: unset;
      }
      */
    </style>
  </head>
  <body>
    <script type="module">
      import '@material/mwc-tab-bar';
      import '@material/mwc-tab';
    </script>

    <mwc-tab-bar>
      <mwc-tab label="Tab 1"></mwc-tab>
      <mwc-tab label="Tab 2"></mwc-tab>
      <mwc-tab label="Tab 3"></mwc-tab>
      <mwc-tab label="Tab 4"></mwc-tab>
    </mwc-tab-bar>
  </body>
</html>

@aomarks aomarks requested a review from dfreedm August 7, 2019 00:06
dfreedm
dfreedm approved these changes Aug 7, 2019
View reviewed changes
Copy link
Collaborator

@dfreedm dfreedm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super strange, def seems like a Firefox issue with display: flex

Anyway, LGTM

@dfreedm dfreedm merged commit 1dc718f into master Aug 7, 2019
@dfreedm dfreedm deleted the cl261233180 branch August 7, 2019 23:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dfreedm dfreedm dfreedm approved these changes

Assignees
No one assigned
Labels
cla: yes
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@aomarks @dfreedm @googlebot