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')
   );

In this article