onsen ui 2 : how to implement android style scrollable tabbar?


Tags: css3,responsive-design,onsen-ui,onsen-ui2

Problem :

I'm making an android app using onsen-ui 2 for front-end. I'll be displaying multiple categories via tabs on one page.Since there are around 7 categories, I want to implement scrollable tab-bar like in native android apps. So, basically how to do something like scrollable tab-bar using onsen-ui 2. For now I think its not built-in. I want to implement something like this:

http://i.stack.imgur.com/zjILk.png

I did try using materialize css but it doesn't work perfectly.It increases the width of the page and breaks the responsive view.

Update: I set these CSS properties to get extended view:

`    .tab-bar{
      display: block;
      table-layout: none;
      width:200%; //this is the problem now...
      }`

along with this I added custom jquery.kinetic library to get touch scrolling from here: http://davetayls.me/jquery.kinetic/ and initialized to ons-tabbar like this: <ons-tabbar modifier="material" id="tab"> //in HTML

$(document).ready(function(){
$("#tab").kinetic();
});

Scrollable tabbar works fine. but if the width of tab-bar class is too big,there are white spaces at the end. Is there any way to overcome this? One answer I thought was CSS media queries but tabs are being added dynamically.So, they might go above 7 in the future.Any help will be appreciated.



Solution :

Well technically it depends on how much you care about the bonus arrows and similar things. External libraries may help if you really want such extras. If what you want however is just the ability to have a scrollable tabbar you can achieve that without much hassle in a couple lines of css:

.tab-bar {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
}

.tab-bar__item {
  display: inline-block;
}

Demo

In the demo I also added width: 20% to the item. If you don't like that you can just add some padding or something similar to make the items look good. Generally something like padding: 0 10px should be more than enough.

If you want the > arrows I guess some javascript will be required. Since the question is tagged css3 though I'm guessing you would like to avoid writing javascript for this.

Also a note about kinetic : it looks nice, but you should also try to see how it feels without it since most phones nowadays seem to already have nice motion scrolling (at least imo). Still it's your decision though.


    CSS Howto..

    css, how to stop an element being squashed by container

    How can I modify a CSS class using JavaScript?

    How to give outer glow effect to column in HTML/CSS?

    CSS how to make an element fade in and then fade out?

    How to store a global variable in JQuery?

    How to debug CSS bundled by Webpack?

    How to change the color of header?

    How to correct div overlapping the title

    How to add css class by default for all the images

    CSS - How to Draw a Multi-Coloured Line?

    Hide all, show a class with css

    How do I stop Bootstrap Input Boxes and Buttons from overlapping the header and footer of a page when scrolling?

    How can I style a JavaFX menu and its items in CSS?

    CSS how to use pseudo-class :not with :nth-child

    Position:Absolute; Div is making the page too wide and adding blank space to the side. How do I reduce its size?

    How to center a navbar

    How to crop image with css

    How to make to border-bottom line longer with CSS

    why image show space and go right, it should be fill up the gap

    how to place last div into right top corner of parent div? (css)

    How to prevent css hover effects executing before you reach the element with your mouse?

    How to combine css selectors

    How to make link unclickable using CSS or jquery? [duplicate]

    CSS: how to align text content horizontally-centered and vertically-centered?

    How to keep div visible when hovering another div

    How to Make CSS Work on 404 Error Page?

    How to remove hover effect from CSS?

    How to overide CSS style of a class using jquery? [closed]

    how to remove and add classes using same function? [closed]

    How to highlight a row in a table on certain occasions