AllenFang / AllenFang/react-bootstrap-table

Table Header Width Bug, When There's Row Selection Configuration

Aperta
#1,129 9 commenti 0 reazioni 0 assegnatari Vedi su GitHub
bug in progress
Lingua principale
JavaScript
Stelle
2.2k
Fork
761
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

I think there's complains about Table Header and Table Body column mismatch. But I want to dig a little bit deeper, maybe could help you find the root cause.

Test Version v3.1.0, with all the css files there.

OK, so this is the first one. I have the row_selection configurations, something like these:
```
selectRow = {{
mode: 'radio',
selected: [this.activeParameterKey],
}}
```
I also set some columns' width, to test the alignment problem, I delete unnecessary fields.

```
Key
Value Type
Example Values
Technical Description
Required
Server Side
Heimdall
Beacon Key
Event Key
Value Unit
```
The Results are showing below:
![alt text](https://raw.githubusercontent.com/wy19900814/CS526/master/Screen%20Shot%202017-03-08%20at%205.46.32%20PM.png "Column Width Setting With Selection Column")

So here's the problem. For the of selection button column, it takes the width of "Key" column, which is 300. For the of "Key" column, it takes the width of "Value Type" column, which is 150. For the of "Value Type" column, it takes the width of "Example Values" column, which is 50. For the of "Example Values" Column, it takes itself width, which is 50, it is correct.

It looks so wired to me, but it looks like a column takes itself setting of width, but if the column after it has a width setting, it will overwrite current column width setting.
Same things happens to "Heimdall" column, both "Heimdall" and "Server Side" column are setting to 200. Also "Value Unit".

But the width in Table Body is all correct. Do you think this could be fixed soon? Or maybe I could look into the code.

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.