How to create a horizontal scrolling list in OnsenUI-Reactjs?

beebase

Does someone know how to do this?

munsterlander

@beebase You “might” be able to do this with this plugin: https://github.com/Morhaus/react-list-view

You would be able to place the Onsen components in the renderItem portion.

Otherwise an option would be to just do it with a standard unordered list and CSS.

<ul class="images">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

ul.images {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  width: 900px;
  overflow-x: auto;
  background-color: #ddd;
}
ul.images li {
  display: inline;
  width: 150px;
  height: 150px;
}

beebase

Thanks, unordered list works well except not with the Splitter (sidebar navigation) as the outer component of the app.
Is there a way to disable the Splitter on certain pages?
Or should I set the Navigator (stacked navigation) as outer component and then add the splitter on pages where I need them?

(index.html)

 <Splitter>
        <SplitterSide
          side='left'
          collapse={true}
          isOpen={this.state.isOpen}
          onClose={this.hide.bind(this)}
          isSwipeable={true}>
          <Page>
            Menu content
          </Page>
        </SplitterSide>
        <SplitterContent>
          <Navigator initialRoute={{component: Skills}}
                     renderPage={this.renderPage}/>
        </SplitterContent>
      </Splitter>

beebase

Ah, found it. isSwipeable={false} makes the scrollbar work perfectly.

  return (
      <Splitter>
        <SplitterSide
          isSwipeable={false}>

munsterlander

@beebase Glad you got it figured out! This is one I was watching because I have a project coming up soon where I will need to do a horizontal scroller as well. Thanks for the upvote and the feedback!

How to create a horizontal scrolling list in OnsenUI-Reactjs? browsing