这是我已经研究了一段时间的事情,但我无法弄清楚这里发生了什么。
关于这个example您可以使用 css 规则 -webkit-column-count 看到如何在 div 上分布复选框列表。
问题是由于某种原因,除了第一列之外的所有列上的复选标记都被隐藏了。您有什么建议可以解决这个问题吗?
这里我附上一个小例子,但请检查我的 jsfiddle 以更好地描述情况。谢谢!
.valueLabel {
/* height: 24px; */
padding: 7px 12px;
width: 400px;
}
.valueLabel paper-checkbox {
margin-right: 12px;
}
.valueLabel paper-checkbox::shadow #ink[checked] {
color: #f39200;
}
.valueLabel paper-checkbox::shadow #checkbox.checked {
border-color: #f39200;
background-color: #f39200;
/* Version 0.7 paper-checkbox */
}
/* COLUMNS */
.valuesContainer {
overflow-y: scroll;
padding: 0px 16px;
}
.valuesContainer > #valuesDiv {
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 0px;
-moz-column-gap: 0px;
column-gap: 0px;
}
.valuesContainer > #valuesDiv .valuesGroup {
display: inline-block;
}
.valuesContainer > #valuesDiv .valuesGroup > span {
text-transform: uppercase;
}
/* LAYOUT WRAP */
.valuesContainer > core-label {
width: 30%;
/* 3 COLUMNS */
line-height: 16px;
font-size: small;
}
.valuesContainer > #valuesDiv core-label.valueLabel {
display: inline-flex;
}
/* FIX THAT I USED TO SHOW ALL CHECKS WHEN THEY ARE ON COLUMNS, USED ON PAPER ELEMENTS >= v0.7 */
/* IT DOES NOT WORK ANYMORE */
.valueLabel paper-checkbox::shadow #checkbox.checked #checkmark {
position: fixed;
margin-top: 2px;
margin-left: 2px;
}
<script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-elements/core-elements.html">
<div class="valuesContainer">
<div id="valuesDiv">
<core-label class="valueLabel" horizontal="" layout="" id="core-label-0">
<paper-checkbox id="1" checked></paper-checkbox>
<div>January</div>
</core-label>
<core-label class="valueLabel" horizontal="" layout="" id="core-label-1">
<paper-checkbox id="2"></paper-checkbox>
<div>February</div>
</core-label>
<core-label class="valueLabel" horizontal="" layout="" id="core-label-2">
<paper-checkbox id="3" checked></paper-checkbox>
<div>March</div>
</core-label>
<core-label class="valueLabel" horizontal="" layout="" id="core-label-3">
<paper-checkbox id="4" checked></paper-checkbox>
<div>April</div>
</core-label>
<core-label class="valueLabel" horizontal="" layout="" id="core-label-4">
<paper-checkbox id="5"></paper-checkbox>
<div>May</div>
</core-label>
</div>
</div>
最佳答案
您遇到了渲染错误。尝试纠正此问题的一种方法是强制 GPU 渲染。有几种方法可以做到这一点,我最喜欢的是使用 transform:translate3d(0,0,0)
。然而,问题在于需要它的元素 (#checkbox.checked #checkmark
) 已经有一个转换。您可以通过设置背面可见性来获得相同的结果。我在下面的演示中按照以下规则执行此操作:
.valueLabel paper-checkbox::shadow #checkbox.checked #checkmark {
...
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
演示
.valueLabel {
/* height: 24px; */
padding: 7px 12px;
width: 400px;
}
.valueLabel paper-checkbox {
margin-right: 12px;
}
.valueLabel paper-checkbox::shadow #ink[checked] {
color: #f39200;
}
.valueLabel paper-checkbox::shadow #checkbox.checked {
border-color: #f39200;
background-color: #f39200;
/* Version 0.7 paper-checkbox */
}
/* COLUMNS */
.valuesContainer {
overflow-y: scroll;
padding: 0px 16px;
}
.valuesContainer > #valuesDiv {
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 0px;
-moz-column-gap: 0px;
column-gap: 0px;
}
.valuesContainer > #valuesDiv .valuesGroup {
display: inline-block;
}
.valuesContainer > #valuesDiv .valuesGroup > span {
text-transform: uppercase;
}
/* LAYOUT WRAP */
.valuesContainer > core-label {
width: 30%;
/* 3 COLUMNS */
line-height: 16px;
font-size: small;
}
.valuesContainer > #valuesDiv core-label.valueLabel {
display: inline-flex;
}
/* FIX THAT I USED TO SHOW ALL CHECKS WHEN THEY ARE ON COLUMNS, USED ON PAPER ELEMENTS >= v0.7 */
/* IT DOES NOT WORK ANYMORE */
.valueLabel paper-checkbox::shadow #checkbox.checked #checkmark {
position: fixed;
margin-top: 2px;
margin-left: 2px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
<script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-elements/core-elements.html">
<div class="valuesContainer">
<div id="valuesDiv">
<core-label class="valueLabel" horizontal="" layout="" id="core-label-0">
<paper-checkbox id="1" checked></paper-checkbox>
<div>January</div>
</core-label>
<core-label class="valueLabel" horizontal="" layout="" id="core-label-1">
<paper-checkbox id="2"></paper-checkbox>
<div>February</div>
</core-label>
<core-label class="valueLabel" horizontal="" layout="" id="core-label-2">
<paper-checkbox id="3" checked></paper-checkbox>
<div>March</div>
</core-label>
<core-label class="valueLabel" horizontal="" layout="" id="core-label-3">
<paper-checkbox id="4" checked></paper-checkbox>
<div>April</div>
</core-label>
<core-label class="valueLabel" horizontal="" layout="" id="core-label-4">
<paper-checkbox id="5"></paper-checkbox>
<div>May</div>
</core-label>
</div>
</div>
关于css - 纸质复选框和 -webkit-column-count,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36599313/