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>
<div id="vueapp" class="vue-app">
    <div>
        <button
            class="k-button"
            @click="onClick"
            ref="button"
        >
            {{buttonText}}
        </button>
        <Popup
            :anchor="'button'"
            :show="show"
            :popup-class="'popup-content'"
        >
            Popup content.
        </Popup>
    </div>
</div>
import { Popup } from '@progress/kendo-vue-popup';
Vue.component('Popup', Popup);

new Vue({
    el: '#vueapp',
    data: function(){
        return {
            show: false
        };
    },
    computed: {
        buttonText: function(){
            return this.show ? 'Hide' : 'Show';
        }
    },
    mounted(){
        this.show= true;
    },
    methods: {
         onClick () {
            this.show = !this.show;
        }
    }
});

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>
<div id="vueapp" class="vue-app">
    <div>
        <Popup
            :offset="offset"
            :show="true"
            :popup-class="'popup-content'"
        >
            Popup content.
        </Popup>
    </div>
</div>
import { Popup } from '@progress/kendo-vue-popup';
Vue.component('Popup', Popup);

new Vue({
    el: '#vueapp',
    data: function(){
        return {
            offset: { left: 150, top: 50 }
        };
    }
});

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. If we want to use the popup-align prop we need to add concrete width and height to the inner container of the popup.

<style>
    .content {
        padding: 30px;
        color: #ffffff;
        background-color: #999999;
        border: 1px solid rgba(0,0,0,.05);
    }
    
     .popup-inner-content {
        width: 100px;
        height: 50px;
        margin: 0;
        padding: 0;
    }

    .content p {
        margin: 0;
    }

    .anchor {
        display: block;
        width: 120px;
        margin: 100px auto;
    }
</style>
<div id="vueapp" class="vue-app">
    <div>
    <div class="example-config row">
                        <div class="col-sm-4 col-xs-12">
                            <h4>Anchor align point</h4>
                            <p>
                                Horizontal <br />
                                <select
                                    v-model="anchorHorizontal"
                                    class="k-textbox"
                                >
                                    <option value="left">Left</option>
                                    <option value="center">Center</option>
                                    <option value="right">Right</option>
                                </select>
                            </p>
                            <p>
                                Vertical <br />
                                <select
                                    v-model="anchorVertical"
                                    class="k-textbox"
                                >
                                    <option value="top">Top</option>
                                    <option value="middle">Middle</option>
                                    <option value="bottom">Bottom</option>
                                </select>
                            </p>
                        </div>
                        <div class="col-sm-4 col-xs-12">
                            <h4>Popup align point</h4>
                            <p>
                                Horizontal <br />
                                <select
                                    v-model="popupHorizontal"
                                    class="k-textbox"
                                >
                                    <option value="left">Left</option>
                                    <option value="center">Center</option>
                                    <option value="right">Right</option>
                                </select>
                            </p>
                            <p>
                                Vertical <br />
                                <select
                                    v-model="popupVertical"
                                    class="k-textbox"
                                >
                                    <option value="top">Top</option>
                                    <option value="middle">Middle</option>
                                    <option value="bottom">Bottom</option>
                                </select>
                            </p>
                        </div>
                        <div class="col-sm-4 col-xs-12">
                            <h4>Popup action</h4>
                            <br />
                               <button
                                class="k-button"
                                @click="onClick"
                            >
                                {{buttonText}}
                            </button>
                        </div>
                    </div>
        <span
            ref="anchor"
            class="anchor content"
        >
            ANCHOR
        </span>
     
        <Popup
            :anchor="'anchor'"
            :show="show"
            :anchor-align="anchorAlign"
            :popup-align="popupAlign"
        >
           <div class="content popup-inner-content">
                <p>Popup content.</p>
            </div>
        </Popup>
    </div>
</div>
import { Popup } from '@progress/kendo-vue-popup';
Vue.component('Popup', Popup);

new Vue({
    el: '#vueapp',
    data: function(){
        return {
            anchor: null,
            anchorHorizontal: 'left',
            anchorVertical: 'bottom',
            popupHorizontal: 'right',
            popupVertical: 'top',
            show: false
        };
    },
    computed: {
        buttonText: function(){
            return this.show ? 'Hide' : 'Show';
        },
        anchorAlign: function(){
            return {
                horizontal: this.anchorHorizontal,
                vertical: this.anchorVertical
            };
        },
        popupAlign: function(){
            return {
                horizontal: this.popupHorizontal,
                vertical: this.popupVertical
            };
        }
    },
    mounted(){
        this.show= true;
    },
    methods: {
         onClick () {
            this.show = !this.show;
        }
    }
});

In this article