MemberJunction / MemberJunction/MJ
related-entity panel variant renders blank for any child that is not an AG Grid, so a non-grid contribution cannot be both on the rail and visible
- Dominant language
- TSQL
- Stars
- 29
- Forks
- 6
- Avg merge
- 2d 1h
- Merged PRs (30d)
- 323
Description
## Summary
`` is the only way to make a `BaseFormPanel` contribution a **first-class left-nav rail item** — but its CSS gives the content box a usable height for exactly one child selector, `mj-explorer-entity-data-grid`. Any other child renders **completely blank**: every node is present in the DOM, the content box computes to zero height, and the variant's `overflow: hidden` hides it. There is no error and nothing in the UI suggests the panel has content.
So a non-grid contribution must choose between *being on the rail* and *being visible*.
## The CSS
`packages/Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.css` (~line 207):
```css
.mj-forms-panel--related .mj-forms-panel-content {
height: auto;
padding: 0;
overflow: hidden;
resize: vertical;
min-height: 0;
max-height: 800px;
}
.mj-forms-panel--related .mj-forms-panel-content > mj-explorer-entity-data-grid,
.mj-forms-panel--related .mj-forms-panel-content > .ng-star-inserted > mj-explorer-entity-data-grid {
height: 100%;
}
```
`height: auto` + `min-height: 0` + `overflow: hidden`, with height restored only for the grid. AG Grid also supplies its own intrinsic height, so it survives; a plain `div`, an SVG canvas, or any other component does not.
## Repro
1. Register a `BaseFormPanel` contribution on any entity with `relatedEntity` + `relatedJoinField` (so it claims a related relationship and appears on the rail).
2. Render **anything other than `mj-explorer-entity-data-grid`** inside `` — e.g. `mj-hierarchy-tree`, a table, or a plain div.
3. Select that rail item. The panel body is empty.
4. Remove `Variant="related-entity"`: the content renders correctly **and** edit-mode controls appear — but the rail item disappears and the panel collapses into the Details group.
Confirmed both directions in a browser on `MJ_BizApps_Contracts: Contracts` (a Lineage panel containing `mj-hierarchy-tree` plus a picker), MJ `6.1.0-edge.2/3`.
## Workarounds, and why each is unsatisfying
- **`height: 100%` on our own content** — a no-op. It resolves against `.mj-forms-panel-content`, which the variant sets to `height: auto`, and 100% of `auto` collapses back to `auto`.
- **`flex: 1 1 auto`** — FORMS_ARCHITECTURE_GUIDE §7d says the selected panel is `flex: 1 1 auto` in the column, but that content box is not the flex parent, so this does nothing either.
- **A pinned `min-height` in px** — works, but it is exactly the "pinned pixel height" §7d says related panels should not use, and it must be hand-tuned per panel.
- **`inclusion: 'Primary'`** — does **not** substitute for the variant; tried, and the rail item did not appear.
## Suggested fix
Make the variant size *any* child, rather than one known component:
```css
.mj-forms-panel--related .mj-forms-panel-content { overflow-y: auto; } /* never clip silently */
.mj-forms-panel--related .mj-forms-panel-content > *,
.mj-forms-panel--related .mj-forms-panel-content > .ng-star-inserted > * { min-height: 0; }
```
…or give the content box a real height in the left-nav case (per §7d, make it the `flex: 1 1 auto` child it is documented to be) so percentage and flex sizing both resolve for children.
Separately worth considering: **`overflow: hidden` on a container whose height can compute to zero is never a safe default.** It converts a sizing mistake into invisible content with no diagnostic. `overflow-y: auto` would have made every case above self-evident.
## Related
Also affects the panel host indirection: `` and the panel host are `display: contents` by design (§7d), so they contribute no box — which means the usual debugging instinct of measuring the host's height returns 0 and proves nothing. Worth a note in PANELS.md.
Contributor guide
Research direction
Inspect packages/Angular/Generic/base-forms/src/lib/panel/collapsible-panel.component.css around the related-panel selectors, then read FORMS_ARCHITECTURE_GUIDE §7d and reproduce the issue with a non-grid child such as mj-hierarchy-tree. Done means related-entity rail panels display non-grid content without zero-height clipping, while AG Grid panels continue to render correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 72/100