Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

data-grid: cells are not aligned

See original GitHub issue

Describe the bug

The datagrid cells are sometimes not aligned

To reproduce

In the following example witness the Type column - rows y and ...props

<vscode-data-grid>
  <vscode-data-grid-row row-type="header">
    <vscode-data-grid-cell grid-column="1" cell-type="columnheader"> Name </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="2" cell-type="columnheader"> Type </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="3" cell-type="columnheader"> Parent </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="4" cell-type="columnheader"> Value </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="5" cell-type="columnheader">
      Description
    </vscode-data-grid-cell>
  </vscode-data-grid-row>
  <vscode-data-grid-row>
    <vscode-data-grid-cell grid-column="1">
      <a href="#">
        <code>y*</code>
      </a>
    </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="2">
      <code>number</code>
    </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="3">
      <a href="#">
        <code>CandlestickChartLineProps</code>
      </a> </vscode-data-grid-cell
    >\n<vscode-data-grid-cell grid-column="4">
      <code></code> </vscode-data-grid-cell
    >\n<vscode-data-grid-cell grid-column="5"> </vscode-data-grid-cell>
  </vscode-data-grid-row>
  <vscode-data-grid-row>
    <vscode-data-grid-cell grid-column="1">
      <code>...props</code>
    </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="2">
        <code>LineProps</code>
    </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="3"> </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="4">
      <code></code>
    </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="5"> </vscode-data-grid-cell>
  </vscode-data-grid-row>
</vscode-data-grid>

Expected behavior

Expected all cells from the same column to be the same size

Screenshots

grab184

Issue Analytics

State:
Created 2 years ago
Comments:15 (6 by maintainers)

Top GitHub Comments

3reactions

daviddossettcommented, Oct 25, 2021

Ok, thanks. I’ll try this + some other options in a sample extension environment and will get back to you if I uncover an obvious solution here. Ideally we can use auto to not prescribe column widths. I was surprised to see that break the layout above.

By the way, @worksofliam, you may want to check out this thread. I noticed some column header/cell alignment issues in your screenshot from the other day.

3reactions

atanasstercommented, Oct 25, 2021

Thank you very much, I had indeed missed that. Added your suggestion and the columns are not mis-aligned, but I hope also that the columns could be auto size at some point, here is the new layout where some of the small columns retain too much space compared to other columns with large (description) content: grab187