colmodel.title in v11.1.0

[jplevene]

I am not sure if this will be fixed in v11.1.1 and if it is due to the inability to set halign.

For the column title I used the HTML below.  The result in v11.0.0 is the "before" image, however in v11.1.0 I get the "after" image.

I feel it is due to the colModel halign bug in v11.1.0.  If it isn't, what is my solution or how long until the halign bug will be fixed?

The reason I see the halign bug is that <div class="pq-td-div"> is now display:flex.  If you make it a display:block again, all works sort of fine (the <span class="pq-title-span"> display:flex should be removed as well).

Code: [Select]

<div role="columnheader" aria-sort="none" aria-colindex="2" id="pq-head-cell-u11-0-1-right" pq-row-indx="0" pq-col-indx="1" class="pq-grid-col  pq-grid-col-leaf" style="left: 0px; width: 260px; height: 29px;">
  <div class="pq-td-div">
    <span class="pq-title-span">
      <input type="checkbox" tabindex="-1" aria-label="indeterminate">Category

      // ********** This is the new bit *************
      <div style="float:right" class="cat_scope_checkbox">
        <span class="label cat_scope_checkbox">Match any </span>
        <span class="ui-icon ui-icon-toggle-off cat_scope_checkbox" style="font-size:1.6em"></span>
      </div>

    </span>
  </div>
</div>

[paramvir]

In a flex layout, `margin-left: auto;` serves a similar purpose to `float: right;` in traditional layouts—it pushes the element to the far right by consuming the remaining space.

To restore the previous behavior, update your HTML like this:

Code: [Select]

<div style="margin-left:auto;" class="cat_scope_checkbox">
  <span class="label cat_scope_checkbox">Match any</span>
  <span class="ui-icon ui-icon-toggle-off cat_scope_checkbox" style="font-size:1.6em"></span>
</div>

Then add the following CSS so the title area takes up the available space:

Code: [Select]

.pq-title-span {
  flex-grow: 1;
}

This ensures the layout distributes space correctly and the checkbox block aligns to the right as expected.

[jplevene]

Thanks, but the "halign" is still broken.

Is this a temporary fix that will change in the next version when "halign" is fixed.

I know how to fix it, I just don't want to be doing patches for different versions.  If this will change, I will just wait for the next version, which I assume will be soon as the current one doesn't work with the latest jQuery.

[paramvir]

Yes, the next version will be released soon.

In the meantime, you can fix the halign issue using the following CSS:

Code: [Select]

.pq-title-span {
  flex-grow: 1;
}

.pq-align-right .pq-title-span {
    justify-content: flex-end;
}

.pq-align-center .pq-title-span {
    justify-content: center;
}

This is the same fix that will be included in the upcoming version.