7

I'm using CSS3 Multiple Columns. Inner elements have position:relative and can contain arrows with position:absolute.

.clm3{
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}

Problem: CSS3 column cut off part of arrow with position:absolute.

Example: http://jsfiddle.net/k4ucr72h/

TylerH
  • 20,799
  • 66
  • 75
  • 101
Тимофей Петров
  • 133
  • 2
  • 5
  • What do you expect to happen? – Itay Apr 13 '15 at 04:45
  • I expect that absolute position element will be completely visible and located above all elements without position:absolute – Тимофей Петров Apr 13 '15 at 04:48
  • 1
    Yes but absolutely positioned elements are still bound to the borders of their relative container. In this case your labels (`.custCheck`) have `position: relative` and that means that the "arrows" won't be able to exceed their limit. I suggest you take the arrows outside of the list, or remove the relative position from the labels, and then locate the arrows with JS. – Itay Apr 13 '15 at 04:53
  • I don't understand. Usually I can move my absolute position element wherever I want outside position:relative parent. – Тимофей Петров Apr 13 '15 at 04:58
  • You can do it, like shown in [this example](http://jsfiddle.net/gp07fys9/). Unless the relative container has `overflow: hidden` like shown in [this example](http://jsfiddle.net/gp07fys9/1/). I guess the browser simply (and quite logically) makes sure that every column will behave as if it has `overflow: hidden` – Itay Apr 13 '15 at 05:06
  • BTW what I've written before about the labels being the boundaries is wrong. The column is the boundary of course. But as I said, if you make the arrows absolute position while the labels won't be, you'll be able to position the arrows where you want – Itay Apr 13 '15 at 05:07

1 Answers1

11

Try to use this on li items in your column:

.clm3 li {
  -webkit-column-break-inside: avoid;
  -webkit-backface-visibility: hidden; 
}

Also add z-index to .countArrow class:

.countArrow {
  z-index: 1
}
k1r8r0wn
  • 780
  • 9
  • 21