diff --git a/app/src/components/list-tabular.jsx b/app/src/components/list-tabular.jsx index 79c4fb066..308f40115 100644 --- a/app/src/components/list-tabular.jsx +++ b/app/src/components/list-tabular.jsx @@ -349,7 +349,6 @@ class ListTabular extends Component { } = this.props; const { count, loaded, empty } = this.state; const rows = this.getRowsToRender(); - const innerStyles = { height: count * itemHeight }; return ( <div className={`list-container list-tabular ${className}`}> @@ -366,7 +365,10 @@ class ListTabular extends Component { columns={columns} draggable={draggable} itemHeight={itemHeight} - innerStyles={innerStyles} + innerStyles={{ + height: count * itemHeight, + backgroundSize: `100% ${this.props.itemHeight}px`, + }} onClick={onClick} onSelect={onSelect} onDragEnd={onDragEnd} diff --git a/app/static/components/list-tabular.less b/app/static/components/list-tabular.less index e53df6749..df98e8f3f 100644 --- a/app/static/components/list-tabular.less +++ b/app/static/components/list-tabular.less @@ -77,6 +77,12 @@ } .list-container { + .list-rows { + // Note: This fills empty / unrendered space with the dividers. + // background-size needs to be provided. + background: linear-gradient(to top, @list-border 0px, @list-bg 1px) repeat; + } + .list-rows > div { // Note: This allows rows to be animated in and out! transition: top ease-out 120ms;