Home » Javascript » displaying background of fixed header

displaying background of fixed header

Posted by: admin November 1, 2017 Leave a comment

Questions:

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.

Screenshot of table-header, checkboxes appear twice for each column instead of once

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>
Answers:

The simle way to fixed the header of table, when your table has a fixed width and fixed layout only css, like in this example:

Note: if any cell must be larger as others use colspan

table{
  width:550px;
  table-layout: fixed;
}
td{
  padding:8px
}
.container{
  height:162px;
  overflow:auto
}
<table border=1>
<tr>
<td>Col1</td>
<td>Col2</td>
<td colspan=2>Col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
</tr>
</table>
<div class="container">
<table border=1>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td colspan=2>info</td>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</table>
</div>

Questions:
Answers:

SOLUTION

We need to add z-index on .fixed css class.

.fixed {
top: 0;
position: fixed;
width: auto;
display: none;
border: none;
z-index: 10000;
}