FixedHeaders calculate header width incorrectly after inline edit

baerrach

This is similar to https://datatables.net/forums/discussion/comment/116225

I dont have a small test case to replicate this.
I have inline editing enabled for the first column which doesn't have an explicit width as I want it to take up whatever space is left.

On page load, and after the first inline edit, all header widths are correct. You'll notice that the style attribute gets wiped on the second and subsequent inline edits.

Thereafter, the header widths get recalculated wrong each time, and you can see from the debug comment I've included that they change each time.

My work around was to disable fixedHeaders

I tried using $(this).width(toWidths[i]); as per the link above but that didn't make any difference either.

Hopefully this is useful to someone on the internet.

<!-- On Page Load -->
<tr role="row">
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Instructions">Instructions</th>
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Image" style="width: 290px;">Image</th>
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Advice" style="width: 378px;">Advice</th>
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Options" style="width: 180px;">Options</th>
  <th class="step__hiddenInlineEdit sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 1px;"><!-- hidden column for inline editing --></th>
</tr>

<!-- After first inline edit of Instructions _matchWidths.thWidths=[943, 320, 378, 180, 1] -->
<tr role="row">
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Instructions">Instructions</th>
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Image" style="width: 290px;">Image</th>
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Advice" style="width: 378px;">Advice</th>
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Options" style="width: 180px;">Options</th>
  <th class="step__hiddenInlineEdit sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 1px;"><!-- hidden column for inline editing --></th>
</tr>

<!-- After second inline edit of Instructions _matchWidths.thWidths=[228, 464, 862, 253, 15] -->
<tr role="row">
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Instructions" style="">Instructions</th>
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Image" style="">Image</th>
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Advice" style="">Advice</th>
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Options" style="">Options</th>
  <th class="step__hiddenInlineEdit sorting_disabled" rowspan="1" colspan="1" aria-label="" style=""><!-- hidden column for inline editing --></th>
</tr>

<!-- After third inline edit of Instructions _matchWidths.thWidths=[241, 460, 856, 250, 15] -->
<tr role="row">
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Instructions" style="">Instructions</th>
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Image" style="">Image</th>
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Advice" style="">Advice</th>
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Options" style="">Options</th>
  <th class="step__hiddenInlineEdit sorting_disabled" rowspan="1" colspan="1" aria-label="" style=""><!-- hidden column for inline editing --></th>
</tr>

<!-- After fourth inline edit of Instructions: _matchWidths.thWidths=[187, 476, 884, 259, 16] -->
<tr role="row">
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Instructions" style="">Instructions</th>
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Image" style="">Image</th>
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Advice" style="">Advice</th>
  <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Options" style="">Options</th>
  <th class="step__hiddenInlineEdit sorting_disabled" rowspan="1" colspan="1" aria-label="" style=""><!-- hidden column for inline editing --></th>
</tr>

allan

Hi,

Thanks for posting this. i know you said you don't have a test case for it, but do you have a link you can give me to the page showing the issue where you discovered it. PM me by clicking my name above if you don't want to make it public.

Regards,
Allan

Ahmed Essam

it doesn't help ,but thank you any way