[Tile/Tile Group]: The width of the tile does not grow to full width

[jasdelreyes]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

The width of the tiles in tile group do not expand to the full width of its parent container. This was previously allowed in the way that tile-select was built with a width prop.

Expected Behavior

The width of the tiles acts responsively, and grows and shrinks to the full size of the parent container.

Reproduction Sample

https://codepen.io/jasdelreyes/pen/PwYOKqr?editors=1100

Reproduction Steps

See the repro in the codepen above.

Reproduction Version

~3.0.0-next.50

Relevant Info

In the codepen, you can see a workaround of using the css values of contents and width: 100%. This works to expand the width of the tiles, but prevents the tiles from showing the greyed out state when disabled.

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Online

[nid13240]

+1 also running into this in MapViewer

[doreenbrinkman]

+1 also have issue in Data Pipelines

[eriklharper]

@jasdelreyes @nid13240 Here's a pure CSS solution to your problem: https://codepen.io/eriklharper/pen/PwYEjgx

Because calcite-tile sets min and max inline size (width) properties directly on itself (via the :host selector), the max-inline-size and min-inline-size properties are completely accessible to overrides based on your layout requirements.

Let me know if that solution above works for you. It seems to work fine with either min-inline-size or max-inline-size set individually (see comment I included in the codepen's css file).

[doreenbrinkman]

This works for Data Pipelines. Thanks!

[nid13240]

thank you, this also works for MapViewer!

[stevenalbers]

@eriklharper Do you know if this solution can be fed into a slot containing a flexbox? Previously a tile-select using the default slot with width: full could stretch to fill its container but I haven't found a non-invasive alternative for tile. Some examples here: https://codepen.io/stevenalbers/pen/qEWYaQj

[github-actions]

Installed and assigned for verification.

[geospatialem]

The original ask is achievable through the workaround mentioned by Erik in this comment above, and Steven's use case above for slotted content in tile has been mitigated and verified in 3.0.0-next.108: