AllenFang / AllenFang/react-bootstrap-table

After Update to 4.3.1 column header and column data not aligned anymore

Aperta
#1,920 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
JavaScript
Stelle
2.2k
Fork
761
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

Hey,

first of all thanks for all the great work. I use react-bootstrap-table quite heavily in all our projects and i love it. Due to the problem with the CSV Export and the special characters i updated to the latest version. Unfortunately i experience a problem that its not aligned anymore when i add width to a column.

The Code Sniped
`
ID
Name
Adresse
Postleitzahl
Ort
Kundennummer
Aktionen`

CSS I used the latest, original CSS and just added one class for the width:
`/*editor error animate*/
/*@import "~toastr/build/toastr.min.css";*/

.react-bs-table-container .react-bs-table-search-form {
margin-bottom: 0;
}

.react-bs-table-bordered {
border: 1px solid #ddd;
border-radius: 5px;
}

.react-bs-table table {
margin-bottom: 0;
table-layout: fixed;
}

.react-bs-table table td,
.react-bs-table table th {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.react-bs-table-pagination {
margin-top: 10px;
}

.react-bs-table-tool-bar {
margin-bottom: 5px;
}

.react-bs-container-header,
.react-bs-container-footer {
overflow: hidden;
width: 100%;
}

.react-bs-container-body {
/*height: 154px;*/
overflow: auto;
width: 100%;
}

.react-bootstrap-table-page-btns-ul {
float: right;
/* override the margin-top defined in .pagination class in bootstrap. */
margin-top: 0;
}

.react-bs-table .table-bordered {
border: 0;
outline: none !important;
}

.react-bs-table .table-bordered > thead > tr > th,
.react-bs-table .table-bordered > thead > tr > td {
border-bottom-width: 2px;
}

.react-bs-table .table-bordered > tbody > tr > td {
outline: none !important;
}

.react-bs-table .table-bordered > tbody > tr > td.default-focus-cell {
outline: 3px solid cornflowerblue !important;
outline-offset: -1px;
}

.react-bs-table .table-bordered > tfoot > tr > th,
.react-bs-table .table-bordered > tfoot > tr > td {
border-top-width: 2px;
}

.react-bs-table .table-bordered > tfoot > tr > th,
.react-bs-table .table-bordered > tfoot > tr > td {
border-bottom-width: 0;
}

/*Esquerda*/
.react-bs-table .table-bordered > thead > tr > th:first-child,
.react-bs-table .table-bordered > tbody > tr > th:first-child,
.react-bs-table .table-bordered > tfoot > tr > th:first-child,
.react-bs-table .table-bordered > thead > tr > td:first-child,
.react-bs-table .table-bordered > tbody > tr > td:first-child,
.react-bs-table .table-bordered > tfoot > tr > td:first-child {
border-left-width: 0;
}

/*Direita*/
.react-bs-table .table-bordered > thead > tr > th:last-child,
.react-bs-table .table-bordered > tbody > tr > th:last-child,
.react-bs-table .table-bordered > tfoot > tr > th:last-child,
.react-bs-table .table-bordered > thead > tr > td:last-child,
.react-bs-table .table-bordered > tbody > tr > td:last-child,
.react-bs-table .table-bordered > tfoot > tr > td:last-child {
border-right-width: 0;
}

/*Topo*/
.react-bs-table .table-bordered > thead > tr:first-child > th,
.react-bs-table .table-bordered > thead > tr:first-child > td {
border-top-width: 0;
}

/*Baixo*/
.react-bs-table .table-bordered > tfoot > tr:last-child > th,
.react-bs-table .table-bordered > tfoot > tr:last-child > td {
border-bottom-width: 0;
}

.react-bs-table .react-bs-container-header > table > thead > tr > th,
.react-bs-table .react-bs-container-footer > table > thead > tr > th {
vertical-align: middle;
}

.react-bs-table .react-bs-container-header > table > thead > tr > th .filter,
.react-bs-table .react-bs-container-footer > table > thead > tr > th .filter {
font-weight: normal;
}

.react-bs-table .react-bs-container-header > table > thead > tr > th .select-filter option[value=''],
.react-bs-table .react-bs-container-header > table > thead > tr > th .select-filter.placeholder-selected,
.react-bs-table .react-bs-container-header > table > thead > tr > th .filter::-webkit-input-placeholder,
.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-input::-webkit-input-placeholder{
color: lightgrey;
font-style: italic;
}

.react-bs-table .react-bs-container-footer > table > thead > tr > th .select-filter option[value=''],
.react-bs-table .react-bs-container-footer > table > thead > tr > th .select-filter.placeholder-selected,
.react-bs-table .react-bs-container-footer > table > thead > tr > th .filter::-webkit-input-placeholder,
.react-bs-table .react-bs-container-footer > table > thead > tr > th .number-filter-input::-webkit-input-placeholder{
color: lightgrey;
font-style: italic;
}

.react-bs-table .react-bs-container-header > table > thead > tr > th .select-filter.placeholder-selected option:not([value='']),
.react-bs-table .react-bs-container-footer > table > thead > tr > th .select-filter.placeholder-selected option:not([value='']) {
color: initial;
font-style: initial;
}

.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter,
.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter {
display: flex;
}

.react-bs-table .react-bs-container-footer > table > thead > tr > th .number-filter,
.react-bs-table .react-bs-container-footer > table > thead > tr > th .date-filter {
display: flex;
}

.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-input,
.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter-input {
margin-left: 5px;
float: left;
width: calc(100% - 67px - 5px);
}

.react-bs-table .react-bs-container-footer > table > thead > tr > th .number-filter-input,
.react-bs-table .react-bs-container-footer > table > thead > tr > th .date-filter-input {
margin-left: 5px;
float: left;
width: calc(100% - 67px - 5px);
}

.react-bs-table .react-bs-container-header > table > thead > tr > th .number-filter-comparator,
.react-bs-table .react-bs-container-header > table > thead > tr > th .date-filter-comparator {
width: 67px;
float: left;
}

.react-bs-table .react-bs-container-footer > table > thead > tr > th .number-filter-comparator,
.react-bs-table .react-bs-container-footer > table > thead > tr > th .date-filter-comparator {
width: 67px;
float: left;
}

.react-bs-table .react-bs-container-header .sort-column {
cursor: pointer;
}

/*inline editor default style*/
.react-bs-container .form-control.editor{
/*width:100%;
top:0;
left:0;*/
/*height: 100%;
position: absolute;*/
}

.react-bs-container .textarea-save-btn{
position: absolute;
z-index: 100;
right: 0;
top: -21px;
}

.react-bs-table-no-data {
text-align: center;
}

.ReactModal__Overlay {
-webkit-perspective: 600;
perspective: 600;
opacity: 0;
overflow-x: hidden;
overflow-y: auto;
background-color: rgba(0, 0, 0, 0.5);
z-index: 101;
}

.ReactModal__Overlay--after-open {
opacity: 1;
transition: opacity 150ms ease-out;
}

.ReactModal__Content {
-webkit-transform: scale(0.5) rotateX(-30deg);
transform: scale(0.5) rotateX(-30deg);
}

.ReactModal__Content--after-open {
-webkit-transform: scale(1) rotateX(0deg);
transform: scale(1) rotateX(0deg);
transition: all 150ms ease-in;
}

.ReactModal__Overlay--before-close {
opacity: 0;
}

.ReactModal__Content--before-close {
-webkit-transform: scale(0.5) rotateX(30deg);
transform: scale(0.5) rotateX(30deg);
transition: all 150ms ease-in;
}

.ReactModal__Content.modal-dialog {
border: none;
background-color: transparent;
}

/*error tip style*/
.animated {
animation-fill-mode: both;
}

.animated.bounceIn,
.animated.bounceOut{
animation-duration: .75s;
}

.animated.shake{
animation-duration: .3s;
}

td.react-bs-table-expand-cell {
cursor: pointer;
}

th.react-bs-table-expand-cell > div {
cursor: pointer;
}

@keyframes shake {
from, to {
transform: translate3d(0, 0, 0);
}

10%, 50%, 90% {
transform: translate3d(-10px, 0, 0);
}

30%, 70%{
transform: translate3d(10px, 0, 0);
}
}

.shake {
animation-name: shake;
}

@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}

20% {
transform: scale3d(1.1, 1.1, 1.1);
}

40% {
transform: scale3d(.9, .9, .9);
}

60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}

80% {
transform: scale3d(.97, .97, .97);
}

to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}

.bounceIn {
animation-name: bounceIn;
}

@keyframes bounceOut {
20% {
transform: scale3d(.9, .9, .9);
}

50%, 55% {
opacity: 1;
transform: scale3d(1.1, 1.1, 1.1);
}

to {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
}

.bounceOut {
animation-name: bounceOut;
}

.Name {
width: 35%;
}`

This is what i looks like:

![image](https://user-images.githubusercontent.com/35486212/37588845-c2e81288-2b63-11e8-9eb6-7332dbd13ff1.png)

If i remove the last line it looks like this:

![image](https://user-images.githubusercontent.com/35486212/37588882-ddac11c8-2b63-11e8-9a64-8a680725e8d8.png)

Can someone please help me.

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.