Auto-width does not work with vaadin-grid-selection-column

[taow80]

Description

The width of the vaadin-grid-selection-column is not taken into account when calculating the width for the vaadin-grid-column using auto-width.

I believe this issue may be related to this bug, however, I installed 24.4.0-alpha2 to see if this fix would work for this issue, and it does not fix it.

Expected outcome

The width of the vaadin-grid-column with auto-width should be 100% of the grid with minus the width of the vaadin-grid-selection-column.

Minimal reproducible example

<script type="module">
  import '@vaadin/grid';
  import '@vaadin/grid/vaadin-grid-selection-column';

  const grid = document.querySelector('vaadin-grid');
  grid.items = [{ content: 'This is a long piece of content that should all display on the screen' }];
</script>

<vaadin-grid>
  <vaadin-grid-selection-column></vaadin-grid-selection-column>
  <vaadin-grid-column path="content" auto-width></vaadin-grid-column>
</vaadin-grid>

Steps to reproduce

Open an HTML page with the snippet above.
This is the result (the regular column has the 100% width of the page and is cutoff because it does not take into account the width of the grid selection column):

Here you can see that the viewport is 412px and the vaadin-grid-column is 413px, no matter the size of the viewport on reload it is always within a pixel of the width of the whole viewport. When it should be the width of the viewport minus the width of the selection column.

Environment

Vaadin version(s): 24.4.0-alpha2

Browsers

Issue is not browser related

[tomivirkki]

Hi @taow80 , I tested the snipped you provided on 24.4.0-alpha2 and it works as expected: the column using auto-width gets a fixed width that equals the width of the widest cell content on the column:

Kapture.2024-01-31.at.16.22.44.mp4

If you want the column to have the width "100% of the grid with minus the width of the vaadin-grid-selection-column" then you can just leave out the auto-width:

<vaadin-grid>
  <vaadin-grid-selection-column></vaadin-grid-selection-column>
  <vaadin-grid-column path="content"></vaadin-grid-column>
</vaadin-grid>

Kapture.2024-01-31.at.16.26.12.mp4

[tomivirkki]

If you want the cell content to wrap as in your images, you can use the "wrap-cell-content" theme variant:

<vaadin-grid theme="wrap-cell-content">

[taow80]

@tomivirkki Thank you! I tested just removing auto-width altogether and you're right! Sorry to bother you. I appreciate your help.

[tomivirkki]

No problem, I'm glad it works. Closing the issue