Aligning and Positioning

The Popup enables you to align it to components and absolute points as well as to control its position.

Aligning to Components

To align the Popup to a specific component, use the anchor property. The Popup opens next to the defined anchor component.

If an anchor is not provided, the Popup will use the offset property value.

<style>
  .popup-content {
    padding: 30px;
    color: #787878;
    background-color: #fcf7f8;
    border: 1px solid rgba(0,0,0,.05);
  }
</style>
class AppComponent extends React.Component {
    anchor = null;
    constructor(props) {
        super(props);
        this.state = { show: false };
    }

    componentDidMount() {
        this.setState({show: true});
    }

    render() {
        return (
            <div>
                <button
                    className="k-button"
                    onClick={this.onClick}
                    ref={(button) => {
                        this.anchor = button;
                    }}
                >
                    {this.state.show ? 'Hide' : 'Show'}
                </button>
                <Popup
                    anchor={this.anchor}
                    show={this.state.show}
                    popupClass={'popup-content'}
                >
                    Popup content.
                </Popup>
            </div>
        );
    }

    onClick = () => {
        this.setState({ show: !this.state.show });
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);

Aligning to Absolute Points

To align the Popup to a specific absolute point that is relative to the document, use the offset property. The Popup opens next to the point and uses the specified popupAlign configuration.

<style>
  .popup-content {
    padding: 30px;
    color: #787878;
    background-color: #fcf7f8;
    border: 1px solid rgba(0,0,0,.05);
  }
</style>
class AppComponent extends React.Component {
    /* Change left or top value to reposition the popup */
    offset = { left: 150, top: 50 };

    render() {
        return (
            <Popup
                offset={this.offset}
                show={true}
                popupClass={'popup-content'}
            >
                Popup content.
            </Popup>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);

Positioning

Both the anchor and the Popup are treated as rectangular elements and, as a result, each has nine pivot points. You can align every point of the Popup to an anchor point. The component will position itself by aligning its top-right point to the bottom-right point of the anchor.

<style>
  .content {
    padding: 30px;
    color: #ffffff;
    background-color: #999999;
    border: 1px solid rgba(0,0,0,.05);
  }

  .content p {
    margin: 0;
  }

  .anchor {
    display: block;
    width: 120px;
    margin: 100px auto;
  }
</style>
class AppComponent extends React.Component {
    anchor = null;
    anchorHorizontal = null;
    anchorVertical = null;
    popupHorizontal = null;
    popupVertical = null;

    constructor(props) {
        super(props);

        this.state = {
            anchorAlign: {
                horizontal: 'left',
                vertical: 'bottom'
            },
            popupAlign: {
                horizontal: 'right',
                vertical: 'top'
            },
            show: false
        };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    onConfigChange = () => {
        this.setState({
            anchorAlign: {
                horizontal: this.anchorHorizontal.value,
                vertical: this.anchorVertical.value
            },
            popupAlign: {
                horizontal: this.popupHorizontal.value,
                vertical: this.popupVertical.value
            }
        });
    }

    render() {
        const { anchorAlign, popupAlign, show } = this.state;

        return (
            <div>
                <div className="example-config row">
                    <div className="col-sm-4 col-xs-12">
                        <h4>Anchor align point</h4>
                        <p>
                            Horizontal <br />
                            <select
                                onChange={this.onConfigChange}
                                ref={(anchorHorizontal) => {
                                    this.anchorHorizontal = anchorHorizontal;
                                }}
                                value={anchorAlign.horizontal}
                                className="k-textbox"
                            >
                                <option value="left">Left</option>
                                <option value="center">Center</option>
                                <option value="right">Right</option>
                            </select>
                        </p>
                        <p>
                            Vertical <br />
                            <select
                                onChange={this.onConfigChange}
                                ref={(anchorVertical) => {
                                    this.anchorVertical = anchorVertical;
                                }}
                                value={anchorAlign.vertical}
                                className="k-textbox"
                            >
                                <option value="top">Top</option>
                                <option value="middle">Middle</option>
                                <option value="bottom">Bottom</option>
                            </select>
                        </p>
                    </div>
                    <div className="col-sm-4 col-xs-12">
                        <h4>Popup align point</h4>
                        <p>
                            Horizontal <br />
                            <select
                                onChange={this.onConfigChange}
                                ref={(popupHorizontal) => {
                                    this.popupHorizontal = popupHorizontal;
                                }}
                                value={popupAlign.horizontal}
                                className="k-textbox"
                            >
                                <option value="left">Left</option>
                                <option value="center">Center</option>
                                <option value="right">Right</option>
                            </select>
                        </p>
                        <p>
                            Vertical <br />
                            <select
                                onChange={this.onConfigChange}
                                ref={(popupVertical) => {
                                    this.popupVertical = popupVertical;
                                }}
                                value={popupAlign.vertical}
                                className="k-textbox"
                            >
                                <option value="top">Top</option>
                                <option value="middle">Middle</option>
                                <option value="bottom">Bottom</option>
                            </select>
                        </p>
                    </div>
                    <div className="col-sm-4 col-xs-12">
                        <h4>Popup action</h4>
                        <br />
                        <button onClick={this.onClick} className="k-button k-primary">{show ? 'Close' : 'Open'}</button>
                    </div>
                </div>
                <span
                    ref={(anchor) => {this.anchor = anchor; }}
                    className="anchor content"
                >
                    ANCHOR
                </span>
                <Popup
                    anchor={this.anchor}
                    anchorAlign={anchorAlign}
                    popupAlign={popupAlign}
                    show={show}
                >
                    <div className="content">
                        <p>Popup content.</p>
                    </div>
                </Popup>
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);
 /