Skip to content
Fix Code Error

Paper checkbox and -webkit-column-count

May 6, 2021 by Code Error
Posted By: Anonymous

This is something I have been researching for a while already but I am not able to find out what’s happening here.

On this example you can see how there is a list of check boxes that are spread over a div using the css rule -webkit-column-count.

The problem is that the check-mark is hidden for some reason on all the columns but the first one. Do you have any tip to fix this?

Here I attach an small example but please check my jsfiddle for a better descriptive view of the situation. Thanks!

_x000D_

_x000D_

.valueLabel {_x000D_
  /* height: 24px; */_x000D_
  padding: 7px 12px;_x000D_
  width: 400px;_x000D_
}_x000D_
.valueLabel paper-checkbox {_x000D_
  margin-right: 12px;_x000D_
}_x000D_
.valueLabel paper-checkbox::shadow #ink[checked] {_x000D_
  color: #f39200;_x000D_
}_x000D_
.valueLabel paper-checkbox::shadow #checkbox.checked {_x000D_
  border-color: #f39200;_x000D_
  background-color: #f39200;_x000D_
  /* Version 0.7 paper-checkbox */_x000D_
}_x000D_
/* COLUMNS */_x000D_
_x000D_
.valuesContainer {_x000D_
  overflow-y: scroll;_x000D_
  padding: 0px 16px;_x000D_
}_x000D_
.valuesContainer > #valuesDiv {_x000D_
  -webkit-column-break-inside: avoid;_x000D_
  -moz-column-break-inside: avoid;_x000D_
  column-break-inside: avoid;_x000D_
  -webkit-column-count: 4;_x000D_
  -moz-column-count: 4;_x000D_
  column-count: 4;_x000D_
  -webkit-column-gap: 0px;_x000D_
  -moz-column-gap: 0px;_x000D_
  column-gap: 0px;_x000D_
}_x000D_
.valuesContainer > #valuesDiv .valuesGroup {_x000D_
  display: inline-block;_x000D_
}_x000D_
.valuesContainer > #valuesDiv .valuesGroup > span {_x000D_
  text-transform: uppercase;_x000D_
}_x000D_
/* LAYOUT WRAP */_x000D_
_x000D_
.valuesContainer > core-label {_x000D_
  width: 30%;_x000D_
  /* 3 COLUMNS */_x000D_
  line-height: 16px;_x000D_
  font-size: small;_x000D_
}_x000D_
.valuesContainer > #valuesDiv core-label.valueLabel {_x000D_
  display: inline-flex;_x000D_
}_x000D_
/* FIX THAT I USED TO SHOW ALL CHECKS WHEN THEY ARE ON COLUMNS, USED ON PAPER ELEMENTS >= v0.7 */_x000D_
_x000D_
/* IT DOES NOT WORK ANYMORE */_x000D_
_x000D_
.valueLabel paper-checkbox::shadow #checkbox.checked #checkmark {_x000D_
  position: fixed;_x000D_
  margin-top: 2px;_x000D_
  margin-left: 2px;_x000D_
}

_x000D_

<script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>_x000D_
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">_x000D_
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html">_x000D_
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-elements/core-elements.html">_x000D_
<div class="valuesContainer">_x000D_
  <div id="valuesDiv">_x000D_
    <core-label class="valueLabel" horizontal="" layout="" id="core-label-0">_x000D_
      <paper-checkbox id="1" checked></paper-checkbox>_x000D_
      <div>January</div>_x000D_
    </core-label>_x000D_
_x000D_
    <core-label class="valueLabel" horizontal="" layout="" id="core-label-1">_x000D_
      <paper-checkbox id="2"></paper-checkbox>_x000D_
      <div>February</div>_x000D_
    </core-label>_x000D_
_x000D_
    <core-label class="valueLabel" horizontal="" layout="" id="core-label-2">_x000D_
      <paper-checkbox id="3" checked></paper-checkbox>_x000D_
      <div>March</div>_x000D_
    </core-label>_x000D_
_x000D_
    <core-label class="valueLabel" horizontal="" layout="" id="core-label-3">_x000D_
      <paper-checkbox id="4" checked></paper-checkbox>_x000D_
      <div>April</div>_x000D_
    </core-label>_x000D_
_x000D_
    <core-label class="valueLabel" horizontal="" layout="" id="core-label-4">_x000D_
      <paper-checkbox id="5"></paper-checkbox>_x000D_
      <div>May</div>_x000D_
    </core-label>_x000D_
_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Solution

You’re running into a rendering bug. One way to try to correct this is to force GPU rendering. There are a few ways to do that, and my favorite is to use transform:translate3d(0,0,0). The issue with that, however, is that the element that needs it (#checkbox.checked #checkmark) already has a transform. You can achieve the same results by setting the backface visibility. I do that in the demo below with the following rule:

.valueLabel paper-checkbox::shadow #checkbox.checked #checkmark {
   ...
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
}

Demo

_x000D_

_x000D_

.valueLabel {_x000D_
  /* height: 24px; */_x000D_
  padding: 7px 12px;_x000D_
  width: 400px;_x000D_
}_x000D_
.valueLabel paper-checkbox {_x000D_
  margin-right: 12px;_x000D_
}_x000D_
.valueLabel paper-checkbox::shadow #ink[checked] {_x000D_
  color: #f39200;_x000D_
}_x000D_
.valueLabel paper-checkbox::shadow #checkbox.checked {_x000D_
  border-color: #f39200;_x000D_
  background-color: #f39200;_x000D_
  /* Version 0.7 paper-checkbox */_x000D_
}_x000D_
/* COLUMNS */_x000D_
_x000D_
.valuesContainer {_x000D_
  overflow-y: scroll;_x000D_
  padding: 0px 16px;_x000D_
}_x000D_
.valuesContainer > #valuesDiv {_x000D_
  -webkit-column-break-inside: avoid;_x000D_
  -moz-column-break-inside: avoid;_x000D_
  column-break-inside: avoid;_x000D_
  -webkit-column-count: 4;_x000D_
  -moz-column-count: 4;_x000D_
  column-count: 4;_x000D_
  -webkit-column-gap: 0px;_x000D_
  -moz-column-gap: 0px;_x000D_
  column-gap: 0px;_x000D_
}_x000D_
.valuesContainer > #valuesDiv .valuesGroup {_x000D_
  display: inline-block;_x000D_
}_x000D_
.valuesContainer > #valuesDiv .valuesGroup > span {_x000D_
  text-transform: uppercase;_x000D_
}_x000D_
/* LAYOUT WRAP */_x000D_
_x000D_
.valuesContainer > core-label {_x000D_
  width: 30%;_x000D_
  /* 3 COLUMNS */_x000D_
  line-height: 16px;_x000D_
  font-size: small;_x000D_
}_x000D_
.valuesContainer > #valuesDiv core-label.valueLabel {_x000D_
  display: inline-flex;_x000D_
}_x000D_
/* FIX THAT I USED TO SHOW ALL CHECKS WHEN THEY ARE ON COLUMNS, USED ON PAPER ELEMENTS >= v0.7 */_x000D_
_x000D_
/* IT DOES NOT WORK ANYMORE */_x000D_
_x000D_
.valueLabel paper-checkbox::shadow #checkbox.checked #checkmark {_x000D_
  position: fixed;_x000D_
  margin-top: 2px;_x000D_
  margin-left: 2px;_x000D_
  -webkit-backface-visibility: hidden;_x000D_
  -moz-backface-visibility: hidden;_x000D_
  -ms-backface-visibility: hidden;_x000D_
  backface-visibility: hidden;_x000D_
}

_x000D_

<script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>_x000D_
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">_x000D_
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html">_x000D_
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-elements/core-elements.html">_x000D_
<div class="valuesContainer">_x000D_
  <div id="valuesDiv">_x000D_
    <core-label class="valueLabel" horizontal="" layout="" id="core-label-0">_x000D_
      <paper-checkbox id="1" checked></paper-checkbox>_x000D_
      <div>January</div>_x000D_
    </core-label>_x000D_
_x000D_
    <core-label class="valueLabel" horizontal="" layout="" id="core-label-1">_x000D_
      <paper-checkbox id="2"></paper-checkbox>_x000D_
      <div>February</div>_x000D_
    </core-label>_x000D_
_x000D_
    <core-label class="valueLabel" horizontal="" layout="" id="core-label-2">_x000D_
      <paper-checkbox id="3" checked></paper-checkbox>_x000D_
      <div>March</div>_x000D_
    </core-label>_x000D_
_x000D_
    <core-label class="valueLabel" horizontal="" layout="" id="core-label-3">_x000D_
      <paper-checkbox id="4" checked></paper-checkbox>_x000D_
      <div>April</div>_x000D_
    </core-label>_x000D_
_x000D_
    <core-label class="valueLabel" horizontal="" layout="" id="core-label-4">_x000D_
      <paper-checkbox id="5"></paper-checkbox>_x000D_
      <div>May</div>_x000D_
    </core-label>_x000D_
_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Answered By: Anonymous

Related Articles

  • Is CSS Turing complete?
  • VueJS masonry layout
  • DataTable draw daterange from vaadin-date-picker in polymer
  • render function or template not defined in component:…
  • Best way to extract messy HTML tables using BeautifulSoup
  • Polymer focus() has to be wrapped in setTimeout() to work?
  • When tab is selected, show next tab.. if last tab selected,…
  • How would I be able to multiple select and pass data in the…
  • How do i update a javascript variable as its value changes?
  • How can I pass a wct test while rearranging children spans…

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Defining Custom Elements separately with Polymer 3.0 to use them based on demand

Next Post:

From Polymer3 to lit-element and material components: replacement for paper-tabs and iron-pages

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error