Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

discussion for v2.0.0 release #331

Open
AllenFang opened this issue Mar 13, 2016 · 87 comments
Open

discussion for v2.0.0 release #331

AllenFang opened this issue Mar 13, 2016 · 87 comments

Comments

@AllenFang
Copy link
Owner

#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

@AllenFang
Copy link
Owner Author

btw, in v2.0.0, for a large column table, the horizontal scrollbar will not display automatically. The solution is set width on some columns to make the total width of table exceed the outer then the scrollbar will display.

@pgiani
Copy link

pgiani commented Mar 14, 2016

I did not see any improvement on Ver 2.0.0 regarding the headers in the wrong widths
image

@AllenFang
Copy link
Owner Author

HI @pgiani, you catch the legacy css file, please make sure you use the newest css file(react-bootstrap-table.min.css or react-bootstrap-table-all.min.css)

@pgiani
Copy link

pgiani commented Mar 14, 2016

Sorry my bad, work great with the new CSS

@AllenFang AllenFang changed the title issues collected on v2.0.0 release discussion for v2.0.0 release Mar 14, 2016
@garciasa
Copy link

Hi guys,
thanks for that @AllenFang , now it works on a plain tables, but I've another issue when your table has selected rows property enable. First time i render the table (comes from a hidden DIV) the header is not display correctly, once you click in one of the radio button, the header gets the correct width.. any idea?

capture

it happens in Chrome(49) and IE (11)

@AllenFang
Copy link
Owner Author

HI @garciasa, The problem is like you said, and the solution is you need to do a foreceUpdate when after tab loaded at first time. Like I said in first thread, check this example.

after tab mounted, please call

afterTabChanged() {
    this.refs.table1.forceUpdate();
}

//...
render() {
  return (
      <BootstrapTable ref="table1" data={products}>
        <TableHeaderColumn dataField="id" isKey={true} >Product ID</TableHeaderColumn>
        //...
      </BootstrapTable>
  );
}

@garciasa
Copy link

@AllenFang
Copy link
Owner Author

@garciasa, that's ok :) feel free to give any feedback after you upgrade to the v2.0.0

@garciasa
Copy link

My problem is that my bootstraptable is in a child component, refs, is not directly accesible!!!! I need to find the way to access to the bootstraptable child...

@AllenFang
Copy link
Owner Author

could you please show your example codes ? I think it should be work, how about this.refs.your_child_component.refs.table?

@garciasa
Copy link

Yes, that is, i was doing my references wrong!!! Thanks again..

@bindiababy
Copy link

Hi, I have updated to use v2.0.0 and included the css
@import (inline) '../../node_modules/react-bootstrap-table/css/react-bootstrap-table-all.min.css';
but still get the same issue of header alignment error

headers

@AllenFang
Copy link
Owner Author

@bindiababy, is the table in the tabs? or could you please give your example ?

@bindiababy
Copy link

@AllenFang the table is not in tabs , but added into an Accordion , so I would still need a force update? I was not sure where to do that though, since I am not handling the onSelect.
<Accordion> <Panel header="Criteria 1" eventKey="1"> <BootstrapTable data={products} selectRow={selectRowProp}> {getTableHeaders()} </BootstrapTable> </Panel> </Accordion>
getTableHeaders --this populates dynamic number of TableHeaderColumn

@AllenFang
Copy link
Owner Author

@bindiababy, yes, you need to do a fore update when tab load at first time. Because Accordion is same as tab, there're some div is hidden

@bindiababy
Copy link

@AllenFang Thanks that works now

@z-wenlin
Copy link

Hi,@AllienFang I have updated to v2.0.0 and add the new react-bootstrap-table-all.min.css and forceUpdate, but my table header still have the alignment error, after some seconds, it will align correct.
image
Here are my codes.
image
Is anything wrong?Thanks a lot.

@juan0087
Copy link

Hello there Allen,

I'm having a hard time displaying the table and content properly on version 2.0.0. The issue is in line 7 of react-bootstrap-table-all.min.css (Rule: table-layout:fixed). If I remove "fixed" or simply change it for "auto" the table displays perfectly as it should, even on mobile devices, but the header breaks and gets misaligned just like before on the previous version.

Here are two examples with fixed and auto table-layout:

*table-layout:fixed: (Displays fine) *
http://take.ms/VAg0q

table-layout: auto:
http://take.ms/4xckP

Misalignment issue with table-layout auto :
http://take.ms/oMeZj

Is there a way to fix this issue? I would deeply appreciate any help.

Thanks in advance!

@AllenFang
Copy link
Owner Author

@geekbosszhang, if your upgrade from older version, make sure your application use the newest react-bootstrap-table-all.min.css and what's browser did your used? btw, any animation on changing between tab?

@AllenFang
Copy link
Owner Author

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

@dannysindra
Copy link

@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
Copy link
Owner Author

@dannysindra, thanks your feedback. :)

@lioralt
Copy link

lioralt commented Aug 10, 2016

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
Copy link
Owner Author

@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
Copy link

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

@lioralt
Copy link

lioralt commented Aug 11, 2016

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

Thanks a lot.

@AllenFang
Copy link
Owner Author

@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
Copy link

@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
<button onClick={this.handleBtnClick}>Fix table width</button>
BS Table
<BootstrapTable ref="myTable" data={....

@skrehnbrink
Copy link

skrehnbrink commented Dec 2, 2016

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

@ryanbartolay
Copy link

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

@AllenFang
Copy link
Owner Author

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

@rodgersk410
Copy link

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
Copy link
Owner Author

@rodgersk410, did you have a screenshot?

@kevinrue
Copy link

kevinrue commented Mar 3, 2017

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

screenshot 2017-03-03 14 59 30

@AllenFang
Copy link
Owner Author

@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
Copy link

kevinrue commented Mar 3, 2017

@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
Copy link

ghost commented Jun 12, 2017

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
Copy link
Owner Author

@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
Copy link

ghost commented Jun 14, 2017

@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
Copy link
Owner Author

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

@ghost
Copy link

ghost commented Jun 16, 2017

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

@AllenFang
Copy link
Owner Author

AllenFang commented Jun 19, 2017

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
Copy link

tzarger commented Jun 19, 2017

@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
Copy link
Owner Author

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

@ghost
Copy link

ghost commented Sep 15, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests