discussion for v2.0.0 release

[AllenFang]

321 #300 #285 #267 #254 #227 #237 #268

I thinks these issues will be solved in v2.0.0. The released day will in the 2016/03/13 or 03/14.

The main patch is

1. fixing the column unalign problem in different browser or in tabs(react-bootstrap)
2. fixing a wrong rendering width on column in some case
3. fixing the wrong height on table

btw, for the unalign column in tabs, please check this example. This example is a workaround solution, because I cant actually got the width of column which in hidden tabs(I found a lots of solutions, but did not worked). In addition, if tab do not render hidden tab, will solve this issues, check this thread

if you have any issues or feedback _is related with these topic_, please tell me in this thread. Sorry for a long time to wait this patch.

---

when upgrade, remember to import(use) newest css file, dont reference legacy one

[devken-net]

@AllenFang I have not try it yet if the misaligned header also occurs if it is outside the tabs. So far I only encounter it inside the tabs.

[Update] It is being aligned when I click on sort. ( in emulation not yet tested it on vm )

[AllenFang]

@markortiz, got it, I'll try to find the problem, btw, did you enable selectRow and there's any vertical or horizontal scrollbar on table?

[devken-net]

Hi @AllenFang,

I don't have selectRow on my table. And I don't have horizontal scrollbar as well. As you can see on my screenshot below, my table is inside a container and I dynamically compute the height (onload and on window resize) of that container so it will fit on the users screen and when the table is longer than the container height it will add scrollbars ( by css, overflow: auto;).

I was able to replicate this also on IE11.

(sample on ie11.):

On my sample dashboard and operators tabs have resizeHeight and on providers I remove resizeHeight.

I think it has something to do with my container height, padding and scrollbars since it works perfectly fine when I remove my script on calculating container's height.

my code:

componentDidMount() {
   this.resizeHeight({ id : container })

    var repeat = 0
    var interval = setInterval( () => {
      let x = document.querySelector( 'div.react-bs-table-container' )
      if( x != '' ) {
        try { // lets put it inside the try and catch to avoid error on componentWillUnmount
          this.refs.operatorsTable.forceUpdate()
          if(repeat > 1) {
            clearInterval( interval )
          } else {
            repeat++
          }
        } catch(err) {
          // console.warn('Table is undefined')
        }
      }
    }, 1000)
}

As you can see I'm calling the resizeHeight height first on componentDidMount and then I will call forceUpdate().

Then when I navigate on tabs and go back again to tab with resizeHeight the table header is misaligned. As you can see also on my sample GIF, the effect of forceUpdate() on misaligned header it don't fix the alignment. But when I sort the table it will align perfectly again.

It also have a weird behavior if you will look closely. Every time when I hover and move my mouse on the table during or before it calls the second forceUpdate() it is being aligned perfectly.

[AllenFang]

@markortiz, I'll try to figure out what happen on IE, BTW, did you have a repo can let me reproduce it?

[dannysindra]

@AllenFang @madeinfree Hi, sorry for late respond; I was working on different project. So like Allen said, I enabled selectRow property in the table. If I remove it, the table gets aligned - but I want to use that property because my users need it for deletion. Is there any fix for this?

Sorry I cannot share the private repo :( Here is my project's dependencies:

"devDependencies": { "babel-core": "^6.6.4", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "babel-preset-react-hmre": "^1.1.0", "css-loader": "^0.23.1", "file-loader": "^0.8.5", "style-loader": "^0.13.0", "url-loader": "^0.5.7", "webpack": "^1.12.14", "webpack-dev-server": "^1.14.1", "webpack-merge": "^0.8.3" }, "dependencies": { "react": "^0.14.7", "react-bootstrap-table": "^2.0.2", "react-dom": "^0.14.7" }

[AllenFang]

@dannysindra, thanks, I'll try this out. Anyway, if you can give me a repo or a example which can reproduce this issue on safari or firefox, I think I can debug more easy. Because the hardest problem is I can't reproduce it sometime ;(

Anyway, I'll try to figure out :+1:

[devken-net]

@AllenFang is it possible to set a min-width and max-width per column? (I'll try to make a test repo for ie misaligned)

[AllenFang]

@markortiz, sorry, react-bootstrap-table does not support min/max width currently. However, we can support in the future :)

@dannysindra, I just write a example and test it on Firefox@31.0, but I cant reproduce your issue, so I really need your examples. BTW, there's any vertical or horizontal scrollbar on table?

Thanks :)

[devken-net]

@AllenFang I have a simple fix for the IE browser misaligned by using css.

First, I remove all inline width on the TableHeaderColumn. Then control every column width in css by putting !important on every width and min-width I could also control min-width as well but now max-width.

Now everything is working perfectly, except if the table have srollbars. I was able to solve this by creating a script that will check of there are any scrollbars then get the scrollbars-width then add a padding to table header that same as scrollbars-width.

I might have an isolated case, but I think the problem is on computation of table-headercolumn width is different on IE since it also put decimal points on px and I think it will be also easier or accurate if we will put the same column width and min-width on table-header and table-body then add padding if necessary. :)

[AllenFang]

@markortiz, great job, for your solution, it only work on IE 9? did you try on different browsers?

BTW, according your said, I actually calculate the scrollbars size and give a padding on header, and I always use parseFloat to get the each width. But I can't figure out why this bug happened ;( However, it's better for me to reproduce this issues by a example or maybe you can give our PR to fix this particular issues on IE :)

Thanks

[dannysindra]

@AllenFang I cannot reproduce the bug when I made a new project and create similar table, it was so confusing... Can you please tell me how did you fix the unaligned column bug from the previous version?

Yep, my table has lots of columns, so it has a horizontal scrollbar.

EDIT: Nevermind! I fixed the header unaligned problem by changing some CSS. I had some modification to the code that override some rules. Thanks for your help!

[AllenFang]

@dannysindra, great job, would you please share what's you did and give some feedback :)

[dannysindra]

@AllenFang Nothing much, really. I have another CSS file which override the table-layout rules. I switched it back to

table-layout: fixed

and then all table heading aligned with the body. Works on Firefox and Safari. Thanks a lot for this awesome module!

[AllenFang]

@dannysindra, thanks your feedback. :)

[lioralt]

Hi, I'm having a problem with the alignment of the header while having a vertical scrollbar.

can you please assist me on this ?

Thanks.

[AllenFang]

@lioralt, ok, You should let me know the following informations:

1. what's the browser and version
2. the react-bootstrap-table version

There's a known unalign issues when using latest chrome.

Thanks :)

[devken-net]

@lioralt you can also try to set it with css just like what I did. :)

[lioralt]

@AllenFang , I'm using chrome version 52.0.2743.116 m and react-bootstrap-table 2.0.3

Thanks a lot.

[AllenFang]

@lioralt, you can upgrade react-bootstrap-table and actually like I said, there's some unalign issues in latest Chrome, I'm going to fix it. thanks :)

[cristian-eriomenco]

@AllenFang I've got same behavior on Chrome and Firefox. Works well on IE 11 and Edge. But there's an interesting thing. It can be programmatically fixed if this.refs.myTable.forceUpdate() is called. Hope this helps with identifying the issue.

Click handler handleBtnClick = e => { this.refs.myTable.forceUpdate(); } Button `

Fix table width

BS Table <BootstrapTable ref="myTable" data={.... `

[skrehnbrink]

The column unalign issue also occurs when in print preview from the browser. I using v2.5.6 in Chrome 54

[ryanbartolay]

I am using react-bootstrap-table": "^2.11.1, still occurs on this version, i am using chrome.

[AllenFang]

If you guy got a unalign issue, please open another issue and I'll handle it, thank you

[rodgersk410]

I was on v 2.11.2 and had an issue with the alignment of the column headers and body data. It seems like if in a particular column, the body cell's text length is longer than the header column's text length, then the table becomes misaligned.

I downgraded to version 2.9.2 and the issue was resolved for me. Version 2.10.0 and onward seems to have this issue.

[AllenFang]

@rodgersk410, did you have a screenshot?

[kevinrue]

Hi Allen,

Thanks for the great work! Here is a screenshot of my situation , and a link to my corresponding GitHub repo. I am using "react-bootstrap-table": "^3.0.0".

Note also that the filter fields show up under each other in my case, rather than side by side as in your examples. Any advice on that one is welcome too, although I appreciate that this is not the point of this thread.

All the best, Kevin

[AllenFang]

@kevinrue, I think you forgot to add the css of react-bootstrap-table, please try again and if the problem is still remain, I think this is a known issue and need some time to handle it. Thanks

[kevinrue]

@AllenFang : Flawless! Thanks so much for the lighting-fast spot-on answer ! I don't know for how much longer I will be able to hide under the cover of "I'm new to NodeJS", but in this particular instance, I wasn't aware that I needed to load your CSS. All fixed now. Cheers!

[ghost]

Hey @AllenFang , I couldn't find a way to keep the horizontal scrollbar visible everywhere without having to scroll to the bottom of the table to find it.

Let's say my table has a max-height of 300, I would like for it to have both the vertical and horizontal scrollbars shown even though I'm not at the bottom of my table (so I don't have to scroll down to move left-right).

Do you think it's a feature you would add soon?

[AllenFang]

@vincentpageau, There is one restriction when you want to make a large column table with horizontal scrollbar: You need set the width on some column to make the total width of table exceed the width of outer.

[ghost]

@AllenFang Worked like a charm!

I was also wondering if react-bootstrap was supporting window resizing. I couldn't find docs for when I want to resize only the height of my table when I resize my window. Thanks

[AllenFang]

@vincentpageau, sorry, we dont support the resize currently :P

[ghost]

@AllenFang Oh ok. Do you think it's a feature you would add in the near future?

[AllenFang]

I dont think so in near future, but I can try to support it in the future. There's a PR already support the resize column width, but need more test, thanks

[tzarger]

@AllenFang Mind if I ask with all the alignment problems above, what was the motivation to create two tables instead of one? Just curious, thanks.. I am having this problem too...

[AllenFang]

@tzarger, it's a loong story ;P The most issue is support the horizon & vertical scroll on bootstrap table.

[ghost]

How to make the table container horizontal scroll without window bottom scroll in react-bootstrap-table. containerStyle={{width: '200%',overflowX: 'scroll'}} I have use above property, but both of scrolls are appear. and table scroll is not like normal table container scroll, hope kindly response. Regards.