Viewport Boundary Detection

The Popup enables you to set its boundary detection functionality by using the collision property.

The property specifies the behavior of the component when it does not fit in the view port. By default, the Popup fits horizontally and flips vertically.

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

    .popup-inner-content {
        width: 100px;
        height: 50px;
        margin: 0;
        padding: 0;
    }

    .anchor {
        position: absolute;
        top: 150px;
        left: 50px;
    }
</style>
<div id="vueapp" class="vue-app">
    <div>
        <button
            class="anchor k-button"
            @click="onClick"
            ref="button"
        >
            {{buttonText}}
        </button>
        <Popup
            :anchor="'button'"
            :show="show"
            :popup-class="'popup-content'"
            :collision="collision"
        >
           <div class="popup-inner-content">
                Popup
            </div>
        </Popup>
    </div>
</div>
import { Popup } from '@progress/kendo-vue-popup';
Vue.component('Popup', Popup);

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

In this article