Addepar / Addepar/ember-table

Newly added cells are not visible when using "*-slack" size constraints

Open
#960 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1.7k
Forks
351
Avg merge
1d 22h
Merged PRs (30d)
1

Description

I noticed an issue using gte-container-slack size constraint. New cells are not visible after a column added dynamically to the end of the column list. If you add a new column to the end of the column list, the cell has the correct width, minWidth, etc. that is expected by the new column. But it also has the following styles:

padding-left: 0px;
padding-right: 0px;
display: none;

As far as I can tell, this is because the slack cell element is being reused for new cells as columns are added and we aren't removing the previously applied slack styles (the ones I posted above). Here is where the styles are set:

https://github.com/Addepar/ember-table/blob/cafec13b7d5d7a6b224ec59b3534efd4895dda18/addon/components/-private/base-table-cell.js#L71-L75

I haven't dug in too deep to see if this reuse is truly the cause or if I'm overlooking something - but the following change does seem to fix the issue 🤷

if (this.get('isSlack')) {
	this.element.style.paddingLeft = 0;
	this.element.style.paddingRight = 0;
	this.element.style.display = width === '0px' ? 'none' : 'table-cell';
} else {
	this.element.style.paddingLeft = null;
	this.element.style.paddingRight = null;
	this.element.style.display = null;
}

Does this seem reasonable? Maybe I'm misunderstanding the issue? If this seems like the right way to go I can prep a PR 👌

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in addon/components/-private/base-table-cell.js around lines 71-75, where the slack styles are applied. Reproduce the issue by adding a column dynamically to the end of the column list while using a gte-container-slack constraint, then inspect the reused cell's inline styles. Done means newly added cells are visible and non-slack cells no longer retain padding or display styles from a prior slack cell.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.