I'm using a grid that uses React Data Grid (https://github.com/adazzle/react-data-grid) and I am having troubles since when a cell is selected its border covers the next cell's text. I have gone through the "exploratory programming" route but I can't understand where to add the code to align the text.
` .react-grid-Container {
clear: both;
}
.react-grid-Main {
background-color: #ffffff;
color: inherit;
outline: 1px solid #e7eaec;
clear : both;
}
.react-grid-Grid {
background-color: #ffffff;
border: 1px solid #dddddd;
}
.react-grid-Canvas {
background-color: #ffffff;
}
.react-grid-Cell {
background-color: #ffffff;
border-right: 1px solid #111;
border: 1px solid #dddddd;
}
.react-grid-Cell:not(.editing) .react-grid-Cell__value {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.react-grid-Canvas.opaque .react-grid-Cell:not(.editing) {
opacity: 0.4;
transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.react-grid-Row:hover .react-grid-Cell,
.react-grid-Row.row-context-menu .react-grid-Cell {
background-color: #f2f2f2;
}
/*....
Some code that handles editing
......*/
.react-grid-Header {
box-shadow: 0px 0px 4px 0px #dddddd;
background: #f9f9f9;
}
.react-grid-HeaderCell {
background: #f9f9f9;
padding: 8px;
font-weight: bold;
border: 1px solid #dddddd;
}
.react-grid-HeaderCell__value {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.react-grid-Cell:hover {
background: #eee;
}
.react-grid-Cell.selected {
border: 2px solid #66afe9;
background: #eee;
border-radius: 4px;
overflow: visible;
z-index: 10;
}`
Have I missed something obvious or is there something with the Reaction framework that interfere?
