5

I am trying to remove the blue border that appears when you click a cell when using react-data-grid. Is this possible, or will I have to create a pull request?

Dylan
  • 1,335
  • 8
  • 21
Matt Beaty
  • 53
  • 4
  • Are you using the default bootstrap css? – Dylan Dec 14 '18 at 15:15
  • Because it tells you to use a default one on the github page. – Dylan Dec 14 '18 at 15:16
  • A good example of how to modify bootstrap colors is located here: https://uxplanet.org/how-to-customize-bootstrap-b8078a011203 – Dylan Dec 14 '18 at 15:18
  • As @Daniel Sixl said in his answer, rdg-selected is the class tag for that border. You could override that class tag to have no border at all. – Dylan Dec 14 '18 at 15:23

1 Answers1

5

Search for .rdg-selected. React Data Grid uses an absolutely positioned extra div for the so called cell-mask.

.rdg-selected {
    border: 2px solid #66afe9;
}

The cell-mask looks like this:

<div tabindex="0">
   <div data-test="cell-mask" class="rdg-selected" style="height: 35px; width: 256px; z-index: 5; position: absolute; pointer-events: none; transform: translate(256px, 0px);"> 
   </div>
</div>

If you want to get rid of the blue border, set the border of this element to none:

.rdg-selected {
    /* border: 2px solid #66afe9; */
    border: none;
}

Or give it a transparent border-color:

.rdg-selected {
    /* border: 2px solid #66afe9; */
    border-color: transparent;
}

Watch out for specificity of your style.

Daniel Sixl
  • 2,488
  • 2
  • 16
  • 29