topic Re: Calcite Block heading causing dropdown list shift in Calcite Design System Questions

Calcite Block heading causing dropdown list shift

FC_Basson — Fri, 24 Feb 2023 08:18:12 GMT

Issue appears in Calcite version 1.0.7 (and earlier versions).

I'm noticing a downward vertical offset of the calcite-dropdown list when it is put inside a calcite-block with a heading property.

When the block heading property is removed, the list appears in the correct position directly below the list.

Here is a Codepen to replicate the issue: https://codepen.io/fcbasson/full/KKxMLgJ

Re: Calcite Block heading causing dropdown list shift

KittyHurley — Fri, 24 Feb 2023 16:24:58 GMT

Hi @FC_Basson:

For cases where Dropdown, or other components, are positioned within another parent component we've added an overlay-positioning attribute to accommodate use cases.

When using the "fixed" value the Dropdown component will escape the overflowing parent component:

<calcite-dropdown width="m" overlay-positioning="fixed">

Here's an updated Codepen showcasing the behavior in 1.0.7.

Re: Calcite Block heading causing dropdown list shift

FC_Basson — Sun, 26 Feb 2023 09:20:57 GMT

Thanks @KittyHurley That works for me.