Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. rhubarb65
    R
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    rhubarb65

    @rhubarb65

    0
    Reputation
    9
    Posts
    632
    Profile views
    1
    Followers
    0
    Following
    Joined Last Online

    rhubarb65 Follow

    Posts made by rhubarb65

    • css .page max-width causes short freezes

      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

      posted in Developer Corner
      R
      rhubarb65
    • onsen Button and ARIA

      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?

      posted in Onsen UI
      R
      rhubarb65
    • RE: Splitter ListItem Uncaught SyntaxError: Unexpected token (

      In Firefox I get

      SyntaxError: function statement requires a name[Learn More]
      

      I am using 2.10.5

      posted in Onsen UI
      R
      rhubarb65
    • Splitter ListItem Uncaught SyntaxError: Unexpected token (

      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

      posted in Onsen UI
      R
      rhubarb65
    • RE: Carousel wont appear

      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

      posted in Onsen UI
      R
      rhubarb65
    • RE: Carousel wont appear

      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

      posted in Onsen UI
      R
      rhubarb65
    • RE: Carousel wont appear

      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))

      posted in Onsen UI
      R
      rhubarb65
    • Carousel wont appear

      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>

      posted in Onsen UI
      R
      rhubarb65
    • RE: Creating a Cordova Hybrid App with React, Redux and Webpack

      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?

      posted in Monaca & Onsen UI Articles
      R
      rhubarb65