如何解决删除由反应同位素创建的行之间的水平间距
我正在使用反应同位素过滤我使用CSS创建的表/网格中的行(供应商)。即使我将间距设置为0,表/网格中的行之间的间距也大致等于每行的高度。这是一些代码:
export default class supplierContainer extends React.Component {
this.state = {
suppliers: null,iso: null,isoLength: null
}
componentDidMount() {
// irrelevant code ... this.setState({ suppliers })
var element = document.querySelector('.supplier-data');
this.setState({
iso: new Isotope(element,{
itemSelector: '.supplier-row',layoutMode: 'vertical','overflow-y': 'visible',}),})
})
filterResults = (input_filter) => {
var iso = this.state.iso;
iso.arrange({
filter: ((element) => {
var supplier_name = element.querySelector('.supplier-name');
if (supplier_name.innerHTML.toLowerCase().includes(input_filter)) {
return element;
}
})
});
this.setState({ isoLength: iso.filteredItems.length });
}
render() {
return
<supplierTableViewIsotope
// where suppliertableconfig came from is not important
supplierTableConfig={ this.supplierTableConfig }
supplierTableData={ this.state.suppliers }
filterResults = {this.filterResults}
input_filter={this.state.input_filter}
isoLength={this.state.isoLength}
/>
}
}
supplierTableViewIsotope文件和类如下:
export default class supplierTableView extends React.Component {
render() {
<div className="row">
<div className="col">
<div className="content-block">
// The following input filter is rendering correctly
<div className="row">
<div className="col-12">
<h3>Filter</h3>
</div>
<div className="col">
<div className="">
<label >{ this.props.label || 'Name' }</label>
<input
type="text"
className="form-control"
id={ 'suppliers_input' }
value={ this.props.input_filter || ''}
placeholder={ this.props.placeholder || 'Enter value...' }
onChange={(e) => this.props.onInputFilter(e.target.value)}
/>
</div>
</div>
</div>
<div className="row shuffle-row">
// The header works,ignore the this.headings,there are 5 columns created per row in the heading and the rows that follow in the body
<div className="supplier-header">
{this.headings.map((h,k) => (
<strong className={`align-middle supplier-th-${k + 1}`} key={k}>{h}</strong>
))}
</div>
<div className="supplier-data">
// This creates many rows with 5 columns,each row has is spaced apart by
{this.props.supplierTableData.map((dataItem,data_k) => (
<div key={data_k} className={dataItem.deleted_at ? 'deleted-supplier supplier-row' : 'supplier-row'} >
{this.props.supplierTableConfig.map((configItem,conf_k) => (
<div key={` ${conf_k}-${data_k} `} className={configItem.attribute == 'name' ? `align-middle supplier-name supplier-td-${conf_k + 1}` : `align-middle supplier-td-${conf_k + 1}`}>
// The values are irrelevant
{this.getValue(dataItem,configItem)}
</div>
))}
</div>
))}
</div>
<div className="supplier-count">
// This footer works
<div>{`Count - ${this.props.isoLength}`}</div>
</div>
</div>
</div>
</div>
</div>
}
}
由于行之间的间距,刚创建的表溢出行,列和内容块。带有计数的页脚正确显示在内容块的底部,但是表行溢出到该内容块的底部。 css如下:
.row {
margin-bottom: 30px;
}
.content-block {
background-color: $white;
border-radius: 8px;
Box-shadow: 0px 4px 10px 0px $shadow-colour;
padding: 2em 1em;
}
.shuffle-row {
position: relative;
margin: 0;
padding: 0;
border: 0;
}
.supplier-header {
display: grid;
grid-template-columns: 5% 25% 5% 15% 50%;
width: 100%;
height: fit-content;
font-size: 1.1em;
color: white;
background-color: black;
}
.supplier-data {
width: 100%;
max-height: 100%;
margin-top: 1em;
padding: 0;
border: 0;
overflow-y: visible !important;
}
.supplier-row {
display: grid;
grid-template-columns: 5% 25% 5% 15% 50%;
grid-template-rows: 100%;
position: relative !important;
width: 100%;
height: fit-content;
padding: 0;
border: 0;
}
// The following supplier table data's and header's have their own classes which are identical so I am changing the format here to save space
.supplier-td-1,2,3,4,5 {
line-height: 2.5em;
height: 2.5em;
text-align: center;
}
.supplier-th-1,5 {
text-align: center;
}
反应同位素似乎是一个新话题,我无法在线找到答案。我已经将同位素布局更改为很多不同的东西,但这在每个人上都会发生,或者更糟的事情会发生。如果我使用水平砌体并将装订线设置为0,则元素之间的间距会消失,但是这完全弄乱了页面上的布局,我无法解决。这应该是更容易的修复。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。