New to Kendo UI for jQuery? Start a free 30-day trial

Adaptive

configuration

When the ActionSheet is adaptive, it occupies the full width of the screen and has the option to cover the entire screen if the fullscreen is set to true as well.

adaptive

Boolean

Default: false

<div id="actionsheet"></div>
<script>
  var actionsheet = $('#actionsheet').kendoActionSheet({
      title:'Select item',
      adaptive: true,
      items:[
          {
              text: 'Edit Item',
              icon: 'pencil',
              click: onClick
          },
          {
              text: 'Add to Favorites',
              icon: 'heart',
              click: onClick
          },
          {
              text: 'Upload New',
              icon: 'upload',
              click: onClick
          },
          {
              text: 'Cancel',
              icon: 'cancel',
              group: 'bottom',
              click: onClick
          },
      ]
  }).data('kendoActionSheet');

  actionsheet.open();
  function onClick(e) {
      e.preventDefault();
      actionsheet.close();
  }
</script>