Add padding-top in react-virtualized <List />

css reactjs react-virtualized
Lionel T picture Lionel T · Feb 7, 2017 · Viewed 12.3k times · Source

I have a <List /> component where I want to add an initial padding-top to the wrapper. Since all the elements are absolute positioned I found this solution but I wonder if it's right or is there another solution less expensive:

const rowRenderer = ({ index, key, style, isScrolling }) => {
// ...

return (
  <ul key={key}
    style={{
      ...style,
      top: style.top + 50,
    }}>
    { items.map(itemRenderer) }
  </ul>
)

}

The related part is the style prop.

Answer

bvaughn picture bvaughn · Feb 7, 2017

You can avoid the unnecessary object-creation and spread operation by moving the padding to the level of the List, eg:

<List
  {...props}
  style={{
    paddingTop: '50px',
    boxSizing: 'content-box',
  }}
  containerStyle={{
    position: 'relative',
    overflow: 'visible'
  }}
/>

See an example of this here: https://plnkr.co/edit/vNHDmpEY2bjQbCup4xsG?p=preview

Related questions

React.js inline style best practices

I'm aware that you can specify styles within React classes, like this: const MyDiv = React.createClass({ render: function() { const style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); Should I …

Read More
How to add multiple classes to a ReactJS Component?

I am new to ReactJS and JSX and I am having a little problem with the code below. I am trying to add multiple classes to the className attribute on each li: <li key={index} className={activeClass, data.class, "…

Read More
React Js conditionally applying class attributes

I want to conditionally show and hide this button group depending on what is passed in from the parent component which looks like this: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on …

Read More