0

React Data Grid ( https://github.com/adazzle/react-data-grid )を使用するグリッドを使用していますが、セルを選択すると境界線が次のセルのテキストを覆うため、問題が発生しています。「探索的プログラミング」ルートをたどりましたが、テキストを揃えるためのコードをどこに追加すればよいかわかりません。

` .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;
}` 

明らかなことを見逃したことがありますか、それとも Reaction フレームワークに干渉するものがありますか?

4

1 に答える 1

0

私はなんとか解決策を作成しましたが、それでも醜い解決策です。本文全体を指し、React が変更を上書きしないようにするスタイルとテキスト整列タグを追加しただけです。

于 2016-06-15T08:54:11.803 に答える