Calcite Block heading causing dropdown list shift

FC_Basson

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

 

KittyHurley

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.