Select to view content in your preferred language

Calcite Block heading causing dropdown list shift

414
2
Jump to solution
02-24-2023 12:18 AM
Labels (1)
FC_Basson
MVP Regular Contributor

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.

FC_Basson_0-1677226297323.png

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

FC_Basson_1-1677226349407.png

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

 

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
KittyHurley
Esri Contributor

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. 

View solution in original post

2 Replies
KittyHurley
Esri Contributor

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. 

FC_Basson
MVP Regular Contributor

Thanks @KittyHurley  That works for me.

0 Kudos