cdk overlay default possition

Question

I'm using cdk overlay flexibleConnectedTo(origin). So it is open depends on free space, if there is not enough space at the bottom it is open at the top. But by default, if there is enough space at the top and at the bottom, it is open at the top. Is it possible to change the default position to open it at the bottom?

  private getOverlayPosition(origin): PositionStrategy {
    return this.overlay.position()
      .flexibleConnectedTo(origin)
      .withPositions(this.getPositions())
      .withFlexibleDimensions(false)
      .withPush(false)
  }

  private getPositions(): ConnectionPositionPair[] {
    return [
      {
        originX: 'center',
        originY: 'top',
        overlayX: 'center',
        overlayY: 'bottom'
      },
      {
        originX: 'center',
        originY: 'bottom',
        overlayX: 'center',
        overlayY: 'top',
      },
    ]
  }

Answer 1

just swap those elements in your ConnectionPositionPair[] array because their order matters. if cdk can position your element according to first position it won't go and look into second one.

  private getPositions(): ConnectionPositionPair[] {
    return [
      {
        originX: 'center',
        originY: 'bottom',
        overlayX: 'center',
        overlayY: 'top'
      },
      {
        originX: 'center',
        originY: 'top',
        overlayX: 'center',
        overlayY: 'bottom',
      },
    ]
  }

reference link

positions: ConnectionPositionPair[] //Ordered list of preferred positions, from most to least desirable.