Hi all!
I’m building a new app and i’m struggling having a buttons bar that extends and can be scrolled horizontally.
Is there any solution?
I’ve tried using ion-scroll direction=“x” etc but when the content exceed horizontal space, it is remainded down on a new row.
Button-bar and tabs don’t fit my need as the button bar and tabs try to stretch buttons to fill the space (ie, having 30 button mean having 30 ultraslim buttons)
thanks
Hmm, I having a hard time understanding what your trying to achieve, can you post a codepen or some sample code?
Well, my target is to realize a toolbar with many buttons (about 30). And the user have to be able to scroll horizontally this bar. Imagine it as a classic calendar app that have days-buttons in the top bar.
My first thought was to put the buttons in a
<ion-scroll direction="x"><!-- a lot of buttons --></ion-scroll>
but it doesn’t work.
see here:
@devocular Yeah I tried getting this together and couldn’t get anything. Wish I could be of more help. Maybe @Calendee has an idea on how to get this?
I forced the sub-header to be really with with min-width: 1800px. It seems to work on desktop. No promises on mobile!
Nice job @Calendee, looks great. @devocular, how does this look for you?
Hi @Calendee!
Thanks for your interest, yes i’ve not mentioned it but i already tried this method and it’s not fitting my needs because i don’t want a fixed width as buttons are generated dynamically… and with this solution the user can scroll too much right and makes button disappear as he is viewing empty space at right of buttons.
Also resizing the width of the container at runtime don’t seems a good idea to me. I think it’s a question of CSS but can’t yet understand what directive of default ionic CSS is causing this strange behaviour.
I’ve tried other solutions too (like setting overflow:scroll etc. but nothing for the moment)…
TADA : http://codepen.io/calendee/pen/HIuft/?editors=111
Requires nightly.
Great! Thank you very much @Calendee!
Nice job @Calendee life saver. I was so bugged building a x-axis scroll-er myself, then went through the docs and forum. And came across this. Thanx.
Any new way to make this ? Like with tabs ?
Thanks
Not sure I understand. You have a screenshot or demo or can explain your concept in more detail.
Tabs in Android horizontal scroll?
You mean like this : http://developer.android.com/design/building-blocks/tabs.html
This will be coming soon I think when Ionic will include swipe to change state.
Yes scrollable tabs is exactly what I’m looking for.
@Calendee The link from @siddhartha is the best demo i can think of 
This seems tricky. Can you put a feature request for this?
@siddhartha sure, on the trello board or as as github issue?
How can I make it a closed scroll, i.e, the buttons start repeating from either directions?
How can I add space between the blue button and the first button?
any one can help me to ,
make segment buttons scrollable
i tried with this code but its not working
it works with plane ion-buttons