0

While using CSS columns, image bullets show partly in both columns. Any ideas how to get the bullet images to stay in their own column when columns break?

Tried some answers on other stack overflow questions and none of these worked. 

-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
column-break-inside: avoid;

The only way I could get it to work correctly was to either decrease the size of the image or increase the margin between the li elements. I need the bullets to be this size (width: 42px, height: 40px) to match the comps from the designer.

Below is a simple reproduction of what I'm working on.

div {
  width: 50%;
  margin: 0 auto;
}

ul {
  list-style-type: none;

  columns: 2;
    column-gap: 4rem;
  line-height: 28px;
  margin:0;
  padding: 0;
}

li {
  font-size:21px;
  position: relative;
  margin-bottom: 2rem;
  padding-left: 4rem;
}

li::before {
  content: '';
  position: absolute;
  width: 42px;
  height: 40px;
  top: 0;
  left: 0;
  background-image: url(https://picsum.photos/42/40);
  border-radius: 50%;
  background-size: contain;
  background-repeat: no-repeat;
}
<div>
  <ul>
      <li>Airy, open floor plans</li>
      <li>Sleek kitchens with stainless-steel appliances</li>
      <li>Brushed-nickel finishes and plank flooring in living area</li>
      <li>Carpeted bedroom</li>
      <li>Individual washer and dryer</li>
      <li>Exceptional Views</li>
      <li>Ceramic tiled baths</li>
      <li>Generous closet and storage space</li>
      <li>Loft style with spiral stairs and private roof access*</li>
  </ul>
</div>

Here's a link to the CodePen so you can see the results.

https://codepen.io/moxdev/pen/xxKObPP

TylerH
  • 20,799
  • 66
  • 75
  • 101
MoxDev
  • 51
  • 1
  • 8

1 Answers1

0

Not sure exactly what you're seeing (screenshot of experienced vs expected might help) but what I see is the images appear to be cut off by the column container and other list items.

Since you have absolutely positioned elements (image bullets), the best bet is to create a "local stacking context". Stacking context can get strange, but the basic idea is that you remove content from the global stacking order. This means other elements don't interfere with/overlap children in the local context.

There are several ways to force local context but I think in this case the will-change property will have the least negative impact. (by the way, this IS NOT the actual intent for the will-change property)

Just add that to the li and see if it fixes the issue.

li {
  other: props;
  other: props;
  will-change: transform;
}

Warning:

Be careful with this since things like z-index are now local to the li and could cause some headaches down the road.

Bryce Howitson
  • 7,339
  • 18
  • 40
  • Hmmm so weird that does seem to fix it! I haven't used those properties before will need to do some testing to make sure everything works. – MoxDev Aug 16 '19 at 15:36
  • Sadly according to caniuse it looks like will-change is not supported in Edge yet which I need to support for work. – MoxDev Aug 16 '19 at 15:40
  • @MoxDev Take a look at that stacking context link. There are several other ways to force it listed there. `Clip-path` is probably supported by Edge. – Bryce Howitson Aug 16 '19 at 15:42
  • You might also try adding a high `z-index` value to the `li:after` AND adding `z-index: 1` to each `li`. That should fix the overlap of li's but won't help with the column container (CSS columns do strange things) – Bryce Howitson Aug 16 '19 at 15:56