0

Is there a way to prevent this fragment of focus outline from being left on the left column? Or is this a chrome bug?

Focus outline fragment

Here is a link to my fiddle

let $li = $('li');
let liLength = $li.length;
let half = Math.floor(liLength / 2);
let $target = $li.eq(half);
$target.addClass('focus');
ul {
  margin: 10px;
  columns: 2;
}

li {
  display: block;
  padding: 10px;
  margin-bottom: 20px;
}

li:focus,
li.focus {
  outline: green auto 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>
qtgye
  • 3,580
  • 2
  • 15
  • 30

2 Answers2

0

In your CSS for the li-elements you need to use display: inline-block; instead of block. Then you will need to set the width to something like width: calc(100% - 50px); so that each item fills the line without going beyond the ul-element. Finally, you need to provide some margin on both the top and bottom of your li-elements. It is from the top of the element that the outline is spilling over.

Some of the pieces for my answer can be found in the accepted answer to this older SO question:

CSS multi-column layout of list items doesn't align properly in Chrome

I have a JS fiddle at:

http://jsfiddle.net/kwiliarty/jz0qfmo8/2/

let $li = $('li');
let liLength = $li.length;
let half = Math.floor(liLength / 2);
let $target = $li.eq(half);
$target.addClass('focus');
ul {
  margin: 10px;
  columns: 2;
}

li {
  display: inline-block;
  padding: 10px;
  margin: 10px 0;
  width: calc(100% - 50px);
}

li:focus,
li.focus {
  outline: green auto 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>
Kevin Wiliarty
  • 31
  • 5
0

Outlines never take up space, as they are drawn outside of an element's content.

You should not set focus on your li's. Instead you should use your li's as wrappers, and place an focusable element (eg. button or link) inside each of your li's.

Make the focusable element handle the focus, and set the padding on your li's to be similar to the focusable elements outline width.

Magnus Kjelland
  • 1