0

I'm trying to draw a focus border on a grid cell.

  • First, I tried outline with offset. Almost perfect, but left and top borders aren't covered.

  • Then I tried with box shadows (also with inset). Here I tried to add multiple shadows to the cell, but I couldn't manage to cover the right and bottom edges. I guess, because the shadow begins always after the border painting.

  • Then I tried with a pseudo after element. This gives the righ result, but only if I set overflow not to hidden. But I need this on each cell. I could set up an another div inside each cell and maybe give this divs overflow: hidden, but I don't want to do this, because it would duplicate the cell elements unnecessarily.

My goal is to have a focus border, which doesn't affect/shift layout (so simple border painting with a thicker width is no go) and which covers the outer borders on each side and also 1px in the cell on each side. Maybe it is also good, if the extra 1px is outside. I didn't try it yet, how it would look.

.row {
  background-color: #ffff;
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px;
  grid-column: 1 / -1;
}

.cell {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  white-space: nowrap;
  padding: 2px;
  font-size: 14px;
}

.container {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  width: 500px;
  position: absolute;
  top: 50px;
  left: 100px;
}

.active {
  outline: 2px solid blue;
  outline-offset: -2px;
}

.active2 {
  position: relative;
  overflow: visible;
}

.active2::after 
{ 
  content: ""; 
  position: absolute; 
  inset: 1px; 
  box-shadow: 0 0 0 2px blue; 
  pointer-events: none; 
}
<div class="container">
   <div class="row">
    <div class="cell">row 1 cell 1</div>
    <div class="cell">row 1 cell 2</div>
    <div class="cell">row 1 cell 3</div>
    <div class="cell">row 1 cell 4</div>
    <div class="cell">row 1 cell 5</div>
  </div>
  <div class="row">
    <div class="cell">row 2 cell 1</div>
    <div class="cell active">row 2 cell 2</div>
    <div class="cell">row 2 cell 3</div>
    <div class="cell active2">row 2 cell 4</div>
    <div class="cell">row 2 cell 5</div>
  </div>
  <div class="row">
    <div class="cell">row 3 cell 1</div>
    <div class="cell">row 3 cell 2</div>
    <div class="cell">row 3 cell 3</div>
    <div class="cell">row 3 cell 4</div>
    <div class="cell">row 3 cell 5</div>
  </div>  
</div>

Improve this question
5
  • It's hard to see, because you need to add JavaScript with navigation events: arrow keys and the pointer down event on a cell should change the selection. Now, your sample suggests that you create a multi-select option. Do you really need it? It would make selection more complicated. And, finally: why your table is not a <table>? It would make things much better. With styles, it looks ok, you just need to add proper padding and vertical align for cells. Commented 1 hour ago
  • No, I don't need any event handling in this example. In my angular app, I of course do. In the keydown event I assign an active-cell class to the active cell. And that's it. So, this is only a css issue. And I use grid for other reasons. Commented 1 hour ago
  • What do you mean? Do you mean you don't want to change the selection, or you don't want to do it for this code sample? That's right, you just toggle a CSS class and style it appropriately. I don't see what's wrong with your styling and thought that moving the selection may reveal some problem we could observe, that's all. Sure, grid-based CSS is fine. The CSS property not touching layout is outline. I don't see where is the problem. Commented 1 hour ago
  • I can see why you don't want the active2 solution as it affects overflow, but what is wrong with your .active solution? The cell has a border all round it (which is different from what you describe in your question). Please could you say exactly what is wrong with your .active solution? Do you definitely see the problem when you run this snippet? Commented 44 mins ago
  • The active solution doesn't cover the left and top borders, since this borders aren't the cell's border, but the borders of the neighbors. Commented 33 mins ago
Related questions
694
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
701
CSS text-overflow in a table cell?
0
Rendering overlay to div with border radius and overflow: hidden (Chrome only)
Load 4 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.