I am working on a react mobile first app . It contains a 9 page carousel. The app is not very wide (ie no menu), so on the web it gets spread across the web page and looks a bit odd. So I try applying some max-width on the page class

.page {
max-width: 600px;
margin:0 auto;
}

This has a serious problem:- The app works for a minute or so of clicking arround, but then it stops responding to click events on the carousel card for a minute or so before working again. This can repeat. The CPU is not working and the click event handler is not being fired.

clicks on the ToolBar above the carousel still work OK.

Another less serious problem (with max-width) is that pushPage causes the empty white margins on both sides of the app to flash black

Maybe there is a better way to do this that avoids the above problems?

Peter

I am trying to get a good ARIA accessability experience on my OnsenUI app. testing on Android. I am an OnsenUI and ARIA newb

<Button onClick={clickHandler} modifier='large'>New</Button>

Aria sais “New”, but I want “New button” (I think)
Aria only highlights button text

<Button role="button" onClick={clickHandler} modifier='large'>New</Button>

Aria sais "New button New"
Aria highlights the whole button (instead of just button text) which is good

<div role="button" aria-label="New" onClick={clickHandler}>
  <Button aria-hidden="true" modifier='large'>New</Button>
</div>

Aria sais "New button"
Aria highlights the whole button

The last example fullfills my (hopefully correct) requirements but seems a bit of a kludge.
Maybe OnsenUI needs a little ARIA love?

In Firefox I get

SyntaxError: function statement requires a name[Learn More]

I am using 2.10.5

I am trying to set up a Splitter menu with a logout ListItem. Unfortunately when I click on logout I get the error in the title. If I debug the source at (index):1 then I get

function () {
      var _this4;
      return (_this4 = _this).__logoutHandler__REACT_HOT_LOADER__.apply(_this4, arguments);
    }

As you can see the function has no name which agrees with the error. Below is render() of MainPage.js

render() {
    const { trips, navigator } = this.props;
    return (
      <Splitter >
        <SplitterSide id="menu" side="right" width="120px" collapse>
          <Page>
            <List>
              <ListItem onclick={this.logoutHandler} tappable>
                <p >&nbsp;&nbsp;&nbsp;Logout</p>
              </ListItem>
            </List>
          </Page>
        </SplitterSide>
        <SplitterContent id="content">
          <Page renderToolbar={() => <NavBar showMenuHandler={this.showMenuHandler} navigator={navigator} />}>
            <AddTripButton clickHandler={this.addTrip} />
            <Card>
              <div className="content">
                {trips && <TripList trips={trips} navigator={navigator} />}
              </div>
            </Card>
          </Page>
        </SplitterContent>
      </Splitter>
    )
  }

logoutHandler dispatches an action

logoutHandler = () => {
  this.props.actions.logout()
}

If I substitute logoutHandler in the render code above like this:-

NavBar showMenuHandler={this.logoutHandler}

then logoutHandler is called OK when I click on the menu icon, which suggests that there is something wrong with ListItem. Unfortunately I cannot get any further witht the debugging. Any ideas?

OnsenUI noob

looks like I have solved it. looks like my node_modules onsui package was screwed up. The directory still had 2.0.4 stylus based css in it. All off a sudden I was getting on build

failed to locate @import file onsenui/stylus/components.styl

So instead trying to get 2.0.4 working again, I tried to get 2.10.5 working. The fix was to replace (in index.js)

import ‘./stylus/index.styl’;

with

import 'onsenui/css/onsenui.css’
import ‘onsenui/css/onsen-css-components.css’

now I am seeing my Carousel

I should add that the 2 points above were with no fullscreen attribute. if I add fullscreen then the scrollbar disappears but still no carousel

I should add that

1. as I add Carouseltems the scrollbar on the right gets “deeper”.

2. I see in the debugger that element ons-carousel-item has CSS visibility: hidden; If I remove this then my content appears however the carousel-items are stacked on top of each other (see 1))

I am new to OnsenUI. I have used the example react-onsenui-redux-weather as a starting point. OnsenUI has been behaiving until I tried to use a Carousel. I basically overwrote the “content” variable with the code below in WeatherPage.js. I had to comment out a few lines because no “this” in a functional component. I get a blank screen and no error. Any ideas?

content = <Carousel
//index={this.state.index}
onPostChange={() => console.log(‘onPostChange’)}
onOverscroll={() => console.log(‘onOverscroll’)}
onRefresh={() => console.log(‘onRefresh’)}
//ref={(carousel) => { this.carousel = carousel; }}
swipeable
overscrollable
autoScroll
fullscreen
autoScrollRatio={0.2
}

<CarouselItem key={"1"} style={{ backgroundColor: 'gray' }}>
  <div className='item-label'>GRAY</div>
  <p>YO</p>
</CarouselItem>
<CarouselItem key={"2"} style={{ backgroundColor: '#085078' }}>
  <div className='item-label'>BLUE</div>
</CarouselItem>

</Carousel>

AFAICS this example is using OnsenUI 2.0.4 and Webpack v1.x.x . Can either of these be upgraded and if so how? Especially interested in what happens to Stylus (replaced by Less?)

Or is there an up to date example available?