Fix sizing of subtables with different column count #19540
Conversation
…rs from base table
sgiehl
added
c: Usability
|
I've added another couple of fixes. Found some more bugs in the calculation and adjusted the code so the resize of a data table is now only triggered when needed. Need to adjust some more tests before this is ready for review... |
sgiehl
force-pushed
the
fixcolumnresize
branch
3 times, most recently
from
683b670
to
4551b14
Compare
| var resizeDataTable = function() { | ||
|
|
||
| if (windowWidth === $(window).width()) { |
There was a problem hiding this comment.
The window resize event is triggered if the height of the window changes. That happens e.g. if a subtable is loaded and the content height increases. As that won't affect the needed width of a column there is no need to resize them.
This might have actually be the reason for some of the resizing bugs we had when loading a subtable. As in some cases the resize for all datatables on the page was triggered.
| @@ -5,9 +5,6 @@ | |||
| <a rel="noreferrer noopener" | |||
| target="_blank" | |||
| href='{% if row.getMetadata('url')|slice(0,4) not in ['http','ftp:'] %}http://{% endif %}{{ row.getMetadata('url')|rawSafeDecoded }}'> | |||
| {% if not row.getMetadata('logo') %} | |||
There was a problem hiding this comment.
Having this icon outside of the label span caused some really weird sizing bugs. The problem is that the label span has width:inherit;, so it copies the width of the parent element. The parent element gains a fixed width from the resizing logic. But this width can't be used for the label span if there is an additional icon outside, as it makes the column wider that it should be.
| @@ -148,9 +148,6 @@ describe("CustomDimensions", function () { | |||
| await (await page.jQuery('.dataTable .subDataTable .value:contains(en):first')).click(); | |||
| await page.waitForNetworkIdle(); | |||
| await page.waitForTimeout(500); | |||
| await page.evaluate(() => { // give table headers constant width so the screenshot stays the same | |||
There was a problem hiding this comment.
This hopefully shouldn't be needed anymore, as the new resizing logic should be more solid.
| @@ -13,6 +13,7 @@ table.dataTable .dataTableRowActions a { | |||
| float: left; | |||
| padding: 6px 4px 6px 0; | |||
| margin: 0; | |||
| width: auto!important; | |||
There was a problem hiding this comment.
otherwise the rowaction links would have width: inherit from another rule, which might cause problems.
| @@ -1446,7 +1480,7 @@ $.extend(DataTable.prototype, UIControl.prototype, { | |||
| var self = this; | |||
|
|
|||
| // highlight all columns on hover | |||
| $(domElem).on('mouseenter', 'td', function (e) { | |||
| $(domElem).on('mouseenter', 'td:not(.cellSubDataTable)', function (e) { | |||
There was a problem hiding this comment.
There was a weird flickering effect when moving the mouse into a subtable sometimes. This seems to have been caused by this event, which isn't needed on a td, that contains a subtable.
|
|
||
| labelWidth = labelWidth - paddingLeft - paddingRight; | ||
| if (elem.find('.prefix-numeral').length) { |
There was a problem hiding this comment.
When comparing, there is an additional element containing the numeral prefix. Due to the width: inherit on the label span, we need to make the element smaller as it should be, as it will get bigger due to that additional element.
There was a problem hiding this comment.
Functional testing done with Firefox and Chromium using the Behavior > Top Paths > Interactions sub-table. Resizing works well and sub-table columns are no longer unnecessarily truncated. Subjectively seems less prone to flickering when resizing or highlighting rows. All the UI tests are passing and I can't see any issues with the code. 👍
Description:
In some reports we have tables where the subtables might have a different column count. One example is the search keyword report, if the paid search performance plugin is installed. Currently the table looks like this:
With this fix, the subtable is aligned without looking at the parent table, and thus the label column gets as much space as available and labels are not truncated
Review