【问题标题】:Trouble with react-bootstrap-table widthreact-bootstrap-table 宽度有问题
【发布时间】:2018-02-10 17:00:54
【问题描述】:

我使用react-bootstrap-table 并且需要垂直滚动。 我的代码:

<BootstrapTable data={products} hover>
      <TableHeaderColumn isKey dataField='id' width='10%'>
          Product ID
      </TableHeaderColumn>
      <TableHeaderColumn dataField='name'>
          Product Name
      </TableHeaderColumn>
      <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>

这段代码工作正常,我得到了自动宽度可调整大小的表格。 之后,我添加了下一个键:

<BootstrapTable data={products} hover height='200px'>

并且遇到了100% width 的问题,我没有调整表格宽度,而是得到了一个如下图所示的滚动条:

我该如何解决这个问题?

【问题讨论】:

    标签: html css twitter-bootstrap reactjs react-bootstrap-table


    【解决方案1】:

    只是想在此处添加此内容,因为我花了很多时间试图弄清楚在使用扩展行时如何解决错位问题。

    所有这些仅适用于表格具有垂直滚动条的情况。

    我有一个独特的问题,我有一个影响表格宽度的可折叠侧边栏。当侧边栏折叠并展开行时,表格会自动调整列宽。当我重新折叠侧边栏时,表格太宽并导致水平滚动条。除此之外,每次用户展开一行时,表格都会重新计算列宽。

    我的解决方案是在渲染过程中去掉垂直滚动条:

    componentWillUpdate(){
        document.querySelector('.react-bs-table-container').style.height = "auto"
    }
    componentDidUpdate(){
        document.querySelector('.react-bs-table-container').style.height = "100%"
    }
    

    componentWillUpdate 即将停用,但目前它运行良好。

    【讨论】:

      【解决方案2】:

      我还打开了issue,图书馆的创建者提出了解决方案:

      您必须在BootstrapTable 上添加printable

      另外,我也在BootstrapTable 上添加了bodyStyle={{overflow: 'overlay'}}

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-06-28
        • 2022-01-05
        • 2018-12-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多