Core | Chevron modifier in ListItem

[zeroliu]

Environment

[Core]
  onsenui latest
  
[Framework]
  react 15.4.2

[Framework binding]
 react-onsenui latest

[Platform]
  Desktop - OS X 10.12.4 64-bit

[Browser]
  Desktop - Chrome 60.0.3112.90 on OS X 10.12.4 64-bit

Encountered problem
Set up a ListItem with chevron modifier and add a div with className 'right' inside this list item. The string rendered in ListItem overlaps with chevron.

How to reproduce
Just set up this structure. It happens 100% of the time.

Demo link

• HTML

<div id="app"></div>

• JS

var MyPage = React.createClass({
  renderToolbar: function() {
    return (
      <Ons.Toolbar>
        <div className='center'>List</div>
      </Ons.Toolbar>
    );
  },

  renderRow: function(row, index) {
    const x = 40 + Math.round(5 * (Math.random() - 0.5)),
          y = 40 + Math.round(5 * (Math.random() - 0.5));

    const names = ['Max', 'Chloe', 'Bella', 'Oliver', 'Tiger', 'Lucy', 'Shadow', 'Angel'];
    const name = names[Math.floor(names.length * Math.random())];

    return (
      <Ons.ListItem key={index} modifier="chevron">
        <div className='left'>
          <img src={`http://placekitten.com/g/${x}/${y}`} className='list-item__thumbnail' />
        </div>
        <div className='right'>
          {name}
        </div>
      </Ons.ListItem>
    );
  },

  render: function() {
    return (
      <Ons.Page renderToolbar={this.renderToolbar}>
        <Ons.List
          dataSource={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
          renderRow={this.renderRow}
          renderHeader={() => <Ons.ListHeader>Cute cats</Ons.ListHeader>}
        />
      </Ons.Page>
    );
  }
});

ons.ready(function() {
  ReactDOM.render(<MyPage />, document.getElementById('app'));
});

[frandiox]

@zeroliu Thanks for reporting! This is an issue in Onsen UI core.

@anatoo This was introduced in [email protected], css-components: Refined the appearance of list-item--chevron.. Can I ask you to have a look at it?

[anatoo]

@frandiox Ok, I will take a look.