I try to create a fixed table-header with the following code from this question, but with checkboxes and they don't display properly. It works on fiddle example but I'm using Symfony3 and Twig, so it's possible that's causing the problem.
How can I solve this?
permissionFixed: function() {
$.fn.fixMe = function() {
return this.each(function() {
var $this = $(this),
$t_fixed;
function init() {
$t_fixed = $this.clone();
$t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
resizeFixed();
}
function resizeFixed() {
$t_fixed.find("th").each(function(index) {
$(this).css("width", $this.find("th").eq(index).outerWidth() + "px");
});
}
function scrollFixed() {
var offset = $(this).scrollTop(),
tableOffsetTop = $this.offset().top,
tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
if (offset < tableOffsetTop || offset > tableOffsetBottom)
$t_fixed.hide();
else if (offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
$t_fixed.show();
}
$(window).resize(resizeFixed);
$(window).scroll(scrollFixed);
init();
});
};
}.fixed {
top: 0;
position: fixed;
width: auto;
display: none;
border: none;
}
.permissionsFixedTHead thead {
background-color: red;
z-index: 10;
color: white;
}<table class="permissionsFixedTHead table table-bordered permissions">
<thead>
{% if form_errors(form.permissions) %}
<tr>
<td class="has-error" colspan="7">{{ form_errors(form.permissions) }}</td>
</tr>
{% endif %}
<tr>
<th>Section</th>
<th>Route</th>
{% for operation in operations %}
<th>
<label for="{{ operation }}CheckboxAll">
<input type="checkbox" id="{{ operation }}CheckboxAll" data-method="{{ operation == 'update' ? 'put':'' }}"/> {{ operation|capitalize }}
</label>
</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for permission in permissions %} {% for route in permission.routes %}
<tr>
{% if loop.first %}
<td rowspan="{{ permission.routes|length }}" style="vertical-align: middle;">{{ permission.section }}</td>
{% endif %}
<td>{{ route.name }}</td>
{% for crud, operation in route.operations %}
<td class="text-center">
{% if operation is not empty %}
<label class="checkbox">
<input type="checkbox" class="checkbox-{{ crud }}"
id="{{ "%s_%s_%s"|format(crud, operation.action, operation.id) }}"
name="role[permissions][]"
value="{{ operation.id }}" {{ operation.id in form.permissions.vars.value ? 'checked' : null }}
data-method="{{ operation.method }}">
</label> {% endif %}
</td>
{% endfor %}
</tr>
{% endfor %} {% endfor %}
</tbody>
</table>
