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

Column header widths change after render #285

Closed
L5eoneill opened this issue Feb 19, 2016 · 20 comments
Closed

Column header widths change after render #285

L5eoneill opened this issue Feb 19, 2016 · 20 comments

Comments

@L5eoneill
Copy link

Table rows render first, with column headers in the wrong widths. Then, they jump to the correct widths to go with the rows. This is especially visible when switching between tabs that each contain their own tables. It takes something like a whole second to settle down the table layouts, which isn't good for the user experience.

When I set all columns but one to fixed width:
<TableHeaderColumn dataField="thefield" dataFormat={theformatter} width="200">
The output is not reflecting the widths I set, and the headers still jump on tab switch.

The column headers aren't even in the same table as the data. I assume that's necessary for other functionality with sorting and such, but it is really breaking the rules of document structure!

@pgiani
Copy link

pgiani commented Feb 19, 2016

Im having the same issue

@AllenFang
Copy link
Owner

There seems like two issues in here, for first, your tab is means browser tab?

Two, the width issues exist actually, I've started a new plan for fixing this problem currently, but need some time, here is reference.

The column headers aren't even in the same table as the data. I assume that's necessary for other functionality with sorting and such, but it is really breaking the rules of document structure!

which that means?

@L5eoneill
Copy link
Author

By Tabs I mean react-bootstrap tabbed interface, not browser tabs.

And by breaking the rules that a table header goes in the same table with the table body, you're setting up a structurally meaningless table (terrible for ARIA), and giving yourself huge problems in setting column widths. With the table header as part of the same table, then the columns can't -- just can't -- be different widths from each other. And that's a good thing.

@AllenFang
Copy link
Owner

@L5eoneill, could you please give some example code(repo or gist) for me to reproduce this issues?
Thanks

@L5eoneill
Copy link
Author

Here's a gist: https://gist.github.com/L5eoneill/74c96b78a12c3deed464

Don't know though... so much going on in React components, it could be a problem with something elsewhere in the app.

Notice: when I look at the output, that name column... in the gist you see it has width="360"? In the DOM it has this, showing width set at 518px:

<th class=" sort-column" style="text-align: left; width: 518px; max-width: 518px;" data-reactid=".0.1.0.1.$1/=11.0.0.1.0.0.0.0.0.1:$1"><div class="th-inner table-header-column" data-reactid=".0.1.0.1.$1/=11.0.0.1.0.0.0.0.0.1:$1.0" data-field="name"><span data-reactid=".0.1.0.1.$1/=11.0.0.1.0.0.0.0.0.1:$1.0.0">Name</span><span class="order" data-reactid=".0.1.0.1.$1/=11.0.0.1.0.0.0.0.0.1:$1.0.1"><span class="dropdown" data-reactid=".0.1.0.1.$1/=11.0.0.1.0.0.0.0.0.1:$1.0.1.0"><span class="caret" style="margin:10px 0 10px 5px;color:#ccc;" data-reactid=".0.1.0.1.$1/=11.0.0.1.0.0.0.0.0.1:$1.0.1.0.0"></span></span><span class="dropup" data-reactid=".0.1.0.1.$1/=11.0.0.1.0.0.0.0.0.1:$1.0.1.1"><span class="caret" style="margin:10px 0;color:#ccc;" data-reactid=".0.1.0.1.$1/=11.0.0.1.0.0.0.0.0.1:$1.0.1.1.0"></span></span></span></div></th>

And you can see the other columns do not have widths set on them. So, your module is ignoring the width setting for some unknown reason.

@AllenFang
Copy link
Owner

@L5eoneill, I understand, like I said, I've a new plan for fixing these all problem about resizing and column width. if I completed, I'll post here and just try again on new version, but need more time.
btw, the column width + horizontal scrollbar + vertical scrollbar all together is hard to design, so if any suggestion or PR is welcome :)
Thanks your feedback !

@L5eoneill
Copy link
Author

Don't know if it will help you any, but any interaction that re-renders the table fixes the thead alignment problem: switch to another page, select a selectRow check (or radio).

@z-wenlin
Copy link

z-wenlin commented Mar 9, 2016

I have the same issue. Is there any solution to solve this problem?@AllenFang
My react-bootstrap-table version is 1.5.4.
image

@AllenFang
Copy link
Owner

I'm solving this issue, I think this patch is coming soon.

@z-wenlin
Copy link

@AllenFang Ok.That's awesome.Thanks.

@devken-net
Copy link

I have the same issue and same scenario with @L5eoneill

on the first render table alignment is very clean and perfect. but every time I re-render table or switch between the tabs (react-tabs) it got dis-align and worst is the table is getting wider and wider.

Currently I'm trying to create my own table width and column width computation and I can say it is quite difficult. I wish I could call the same function that could compute the width like _adjustHeaderWidth.

Thanks in advance @AllenFang for the patch!

@devken-net
Copy link

@AllenFang i think adding this._adjustHeaderWidth(); on componentWillReceiveProps will solve the problem.

@AllenFang
Copy link
Owner

hi all, about the react-bootstrap-table in tab will cause a unalign problem, I've solved it in my new table structure plan and I'll release it in near future. Sorry for a long time to wait ;(

@juan0087
Copy link

Awesome Allen! I'm having the same issue here as well. Hope to see the patch soon!

Thanks in advance! =)

@AllenFang
Copy link
Owner

Dear all, v2.0.0 has been released, you can check #331 for more detail explanation and I'll close this issues, if problem still remain, please tell me on #331 or open an issue

@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

@RishiAgar
Copy link

Issue is still there, Width of table head and columns are not same and not aligning

@AllenFang
Copy link
Owner

@RishiAgar, what's version you used and have any screenshot? thanks

@RishiAgar
Copy link

Version 2.11.2

 <BootstrapTable data={ products } cellEdit={{mode: 'click'}} tableHeaderClass='table-head'>
    <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
    <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
    <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>

screen shot 2017-02-10 at 8 15 01 pm

@RishiAgar
Copy link

Sorry, never mind, my mistake, checked logs, some caching issue.

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

7 participants