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 make a perfectly alligned left (or right) border?

    How to remove an invisible space between div tags

    how to write browser specific css properties?

    How to create icons like font awesome

    How to Automatically adjust width in CSS so horizontal scrollbars would adjust automatically without taking so much space?

    How to make css search form responsive

    How to control number of items per row using media queries in Flexbox?

    How can I make a div horizontally center itself in another div? [duplicate]

    How to render a template with dynamic CSS?

    How to bounce to top with button on image with CSS

    How do I make the 'panel/well' dynamically wrap around the image while keeping it centered? // Using Bootswatch/Bootstrap CSS

    Beginner's stuff: How to stop CSS' Divs from overlapping?

    How can I stop mobile Safari from pausing before beginning a transition

    how to change size of the element using css?

    How to change a button data-icon size

    How to prevent specific css style sheet from styling a specific html tag

    How to include SASS files and CSS files into version repository and developement cycle

    How can I display 2 big buttons next to each other html & css

    How do I align my navigation to the right without removing (display: inline;)?

    How to fit a div container to cover all the remaining space in between?

    How to increase size of something in class, but not other elements in class?

    zindex + jquery: How to make my menu appear over the jquery script?

    How to know if an element's width is absolute or relative?

    Is my code HTML and CSS proper, and how do I add a hover effect to just the text in the nav bar?

    How do I line up my textboxes without using a table? html/css

    How to center a single character both vertically and horizontally in a square div

    how to show an arrow to the only li item that has sub-menu

    How to place 3 different paragraphs next to each other?

    When I print my webpage I lose all the css colouring. Is there an option or script to print a webpage exactly how it looks?

    How to position boxes like a posterboard with CSS?