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

Wrong column sizing #421

Closed
colino opened this issue Apr 27, 2016 · 1 comment
Closed

Wrong column sizing #421

colino opened this issue Apr 27, 2016 · 1 comment

Comments

@colino
Copy link

colino commented Apr 27, 2016

Hi @AllenFang time ago i noticed you a problem about column size in react-bootstrap-table, updating to the new version i'm still having the same problem:

wrongsizing
and this is error with chrome console:

error

this is my code:

`
var selectRowProp = {
mode: "radio",
clickToSelect: true,
bgColor: "rgba(96, 166, 229, 0.67)",
onSelect: this.onRowSelect
};

<BootstrapTable
                            data={dataset}
                            striped={true}
                            hover={true}
                            pagination={true}
                            insertRow={false}
                            deleteRow={false}
                            condensed={true}
                            search={true}
                            exportCSV={true}
                            selectRow={selectRowProp}
                            >

                        {
                            columns.map(function(column, i){
                                //var pKey="false";

                                if(column == "index"){
                                    return(
                                        <TableHeaderColumn isKey={true} dataField={column} dataAlign="center" dataSort={true} width="100%" key={i}>{column}</TableHeaderColumn>
                                    );
                                }else {
                                    return(
                                        <TableHeaderColumn dataField={column} dataAlign="center" dataSort={true} width="100%" key={i}>{column}</TableHeaderColumn>
                                    );
                                }
                            })
                        }

                    </BootstrapTable>`

what's wrong?

@AllenFang
Copy link
Owner

@colino, firstly, the problem of the error message is you using the react@15.0.0, but we does not support it (BTW, will support it in the recent).
And then about the column sizing problem. there are some restriction which you can find my explanation on #331.

for your case, a large columns table, the horizontal scrollbar will not display automatically after v2.0.0. The workaround is set width on some columns to make the total width of table exceed the outer then the scrollbar will display.

You can check this example, actually, it's a extreme case, you don't need to set all column width in most case. In addition, after v2.0.0, react-bootstrap-table does not accept percentage on with due to some width and unalign problems on table.

And if you upgrade react-bootstrap-table, plz using the newest css files, don't cache the legacy one.

You can try it out and feel free to discuss with me :)

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

No branches or pull requests

2 participants