-
Notifications
You must be signed in to change notification settings - Fork 782
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
Misaligned header when using React Boostrap Tabs #302
Comments
@Meera613, I've started to re-design the dom of react-bootstrap-table for fixing width and unalign problem. It will coming soon. btw, could you please give me a available example for me to test on my new design? Thanks |
duplicate with #285 |
Hey, I'm OP on that SO post. I've actually spent all day today working on it. Some things to know: My current diagnoses: When I open the tab containing the table before the data has loaded, then when the data loads the table looks correct. If I am in a different tab when the data loads and then switch to the tab with the table, the headers are misaligned. Specifically: Good header <th class=" sort-column" style="text-align: left; width: 54px; max-width: 54px;">
<div class="th-inner table-header-column" data-field="pid">
<span>PID</span>
<span class="order">
<span class="dropdown">
<span class="caret" style="margin:10px 0 10px 5px;color:#ccc;"></span>
</span>
<span class="dropup">
<span class="caret" style="margin:10px 0;color:#ccc;"></span>
</span>
</span>
</div>
</th> Bad Header <th class=" sort-column" style="text-align: left; width: 0px; max-width: 0px;">
<div class="th-inner table-header-column" data-field="pid">
<span>PID</span>
<span class="order">
<span class="dropdown">
<span class="caret" style="margin:10px 0 10px 5px;color:#ccc;"></span>
</span>
<span class="dropup">
<span class="caret" style="margin:10px 0;color:#ccc;"></span>
</span>
</span>
</div>
</th> You can see that the only difference is that the Do you already know what the problem is? |
@MatthewHerbst, I thinks your guess is right. But I've not started to solve this issues yet. Like I said, I am design a new structure currently, if any example can reproduce this issues, I think I can solve it on new design. :) Thanks your feedback! |
The table header gets misaligned with the column data when switching tabs (React Boostrap Tabs) similar to the one given in the below link.
http://stackoverflow.com/questions/34054567/react-bootstrap-table-misaligned-header-columns
The text was updated successfully, but these errors were encountered: