Materialize: Mobile Tabs

[acburst]

[CoDEmanX]

Mobile tabs as in tabs for lateral navigation, so that you are able to switch tabs by swiping right / left?

[coldKingdom]

Any news on this? Would be nice to have some sort of responsive tabs.
http://codyhouse.co/gem/responsive-tabbed-navigation/ has a real nice way of doing it, at least for my taste. But it may not be the correct way to use with Material-design, I don't know.

[ecuanaso]

Has this issue been resolved? Not sure if it has or not. Thanks

[lepatlamass]

Hi guys got this problem with materialized css when I want to start using
it off line it doesn't work especially the js behind it e.g the modals and
the forms do not respond as it it's on the officials webpage thanks for the
help.

On Sun, May 31, 2015, 12:41 david castillo [email protected] wrote:

Has this issue been resolved? Not sure if it has or not. Thanks

—
Reply to this email directly or view it on GitHub
https://github.com/Dogfalo/materialize/issues/487#issuecomment-107161128
.

[mike-north]

this is not that hard to add to materialize. See the navbar at the top of ember-cli-materialize

[Dogfalo]

just letting you know it looks a bit weird on windows
http://puu.sh/i824z/e629535b79.png

On Sun, May 31, 2015 at 9:46 PM, Mike North [email protected]
wrote:

this is not that hard to add to materialize. See the navbar at the top of
ember-cli-materialize http://sgasser.github.io/ember-cli-materialize/

—
Reply to this email directly or view it on GitHub
https://github.com/Dogfalo/materialize/issues/487#issuecomment-107303598
.

Doggy sends his greetings from Mars.

[navee7]

Have anyone found a solution?

would be nice to implement below link type of scrolling tabs in materialize

http://www.jqueryscript.net/layout/Awesome-Scrolling-For-Wide-Tab-Interface-Applications-ScrollTabs.html

[CoDEmanX]

Works better than scrolling tabs in another material design framework I stumbled upon last week, but overall usability is still bad. It's not that bad for touch devices, but for mouse interaction it is (too much clicking/dragging).

[navee7]

Any other suggestions on how to make it work?

[ecuanaso]

Looks like this feature is a work in progress unless somebody has found a solution.

[CoDEmanX]

Well, not have that many tabs to avoid scrolling need.
Or go vertical, like in Google photos web.

[raitucarp]

I know this issue is still open. Any other suggestion guys?

[generalleger]

@raitucarp what do you think of Google's implementation at getmdl.io?

[raitucarp]

@generalleger:

the specification support tabs more than 3, you can read here:
http://www.google.com/design/spec/components/tabs.html#tabs-usage

But I don't know mdl kit by google, implement it. I have not used it. What do you think?

[generalleger]

@raitucarp I think they did a great job of implementing it. If you load up getmdl.io on a mobile device, you can see the tabs implementation right on their own page without navigating through the docs.

[ahlechandre]

I have more than 5 items and I was forced to truncate them

.tabs .tab a 
{
   text-overflow: ellipsis;
}

[mlukaszczyk]

Hey there!

Any news if this feature is going to be implemented in the next Versions?

Thanks,

Michael

[FeedyFeedback]

Does somebody know how i can swipe between tabs? Is there any jquery I can use in combination or is there anything to swipe to next tab?

[isaachinman]

Was this ever resolved? Looks like in the documentation there is now a scrolling tabs example, but there are still horizontal scrollbars appearing in FF.

For anyone that needs a truly cross-browser solution, this is pretty basic stuff. Just add a wrapper div to your tabs ul:

.tabs-container {
  overflow: hidden;
  max-width: 100%;
}

And then modify the actual tabs:

.tabs {
  margin-bottom: -16px !important;
  overflow-x: auto;
  overflow-y: hidden;
  height: 64px;
}

Not pretty but it gets the job done.

[burnaDLX]

.tabs {
    overflow: -moz-scrollbars-none;
}
::-webkit-scrollbar {
    display: none;
}

Fixed the issue for me in Webkit and Firefox

[isaachinman]

@burnaDLX Uh... No. -moz-scrollbars-none is deprecated.

[Grendizr]

@isaachinman : Agreed tabs are much better without scrollbar but would be nice to be able to scroll to the hidden elements .... like pagination

[jpt007]

Agree with @Grendizr . +1 vote.

[ugoindivirtual]

+1 vote

[ebecrm17]

Grendizr, nice idea, I tried to mix both of them but it didn't work

[pvaladez]

+1 vote - I would love to see this as well. Mobile swipe functionality needed for tabs!