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
Solved! Go to Solution.
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.
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.
Thanks @KittyHurley That works for me.