Home > widget-integration > RecommendationWidgetController > buildDropboxStyle

RecommendationWidgetController.buildDropboxStyle() method

Builds CSS style string for dropdown positioning.

Creates inline styles for absolute positioning of dropdown elements relative to their trigger buttons. Override this method to customize dropdown positioning logic, add viewport edge detection, or implement custom positioning strategies.

Signature:

buildDropboxStyle(rootPosition: DOMRect): string;

Parameters

Returns:

string

CSS style string with position, dimensions, and z-index for dropdown positioning

Example

Override to add viewport edge detection:

public buildDropboxStyle(rootPosition: DOMRect): string {
  const { width, height, left, top } = rootPosition;
  const dropdownHeight = 200; // Estimated dropdown height

  // Check if dropdown would overflow viewport bottom
  const spaceBelow = window.innerHeight - (top + height);
  const shouldOpenUpward = spaceBelow < dropdownHeight;

  const topPosition = shouldOpenUpward ? top - dropdownHeight : top + height;

  return `position:fixed;z-index:1000;width:${width}px;left:${left}px;top:${topPosition}px`;
}