AllenFang / react-bootstrap-table

A Bootstrap table built with React.js
https://allenfang.github.io/react-bootstrap-table/
MIT License
2.23k stars 782 forks source link

Misalignment/Scroll issues with MaxHeight and search enabled #1601

Open CoralSilver opened 7 years ago

CoralSilver commented 7 years ago

I have a table with maxHeight set and search enabled which is not displaying correctly.

  1. Load table with enough data to cause a vertical scroll bar.
  2. Search to filter results enough that scrollbar disappears.
  3. Clear search.
  4. RESULT: Table has both vertical and now horizontal scrollbar as table width is not recalculated to subtract scrollbar width.

I tried adding ‘printable’ per this issue, which does remove the horizontal scroll issue. Instead on load, the column headers are misaligned slightly to the right of their columns. I am using expander and when an expander is opened it fixes the misalignment. Is this a bug or how do I get it to correctly display on load?

(The width of the columns does not seem to change the rendering issue at all. I tried setting the widths with both px and % and leaving off widths entirely).

I also tried adding overflow: 'overlay' to the table body which does fix the misalignment issue, but I would rather not use that as it is only supported in webkit browsers. The width of the scrollbar should be calculated into the table width on load.

AllenFang commented 7 years ago

HI @CoralSilver, actually, I do not suggest to use printable, it must cause unalign. and currently, the horizontal scroll must appear if you configure height on table. it's true and on way to avoid.

That's the reason why I wanna rebuild react-bootstrap-table to react-bootstrap-table2, some wrong design in here.

Feel free to let me know your concern or idea, thanks 👍

Motoxpro commented 6 years ago

Hey,

Just wanted to add this here because I spent a ton of time trying to figure out how fix misalignment when using an expanded row.

All of this only applies when the table has verticle scroll bars.

I had a bit of a unique problem in that I have a collapsible sidebar that effects the table width. When the sidebar is collapsed and I expand the row, the table autosizes the column width. When I re-collapse the sidebar, the table is too wide and causes horizontal scrollbars. In addition to that, the table re-calculates the column width everytime the user expands a row.

My solution was to get rid of the verticle scrollbar during render:

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

componentWillUpdate is going away soon, but for now it is working perfectly.