All docs
V20.2
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

Specify Display Mode

By default, the ActionSheet comes up from the bottom of the page. If you set the usePopover property to true, the action sheet will pop over a certain element on the page. Use the target property to specify this element.

jQuery
JavaScript
$(function() {
    $("#actionSheetContainer").dxActionSheet({
        dataSource: actionSheetData,
        usePopover: true,
        target: "#actionSheetTarget"
    });
});
Angular
HTML
TypeScript
<dx-action-sheet
    [dataSource]="actionSheetData"
    [usePopover]="true"
    target="#actionSheetTarget">
</dx-action-sheet>
import { DxActionSheetModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxActionSheetModule
    ],
    // ...
})
Vue
<template>
    <DxActionSheet ...
        :use-popover="true"
        target="#actionSheetTarget"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxActionSheet } from 'devextreme-vue/action-sheet';

export default {
    components: {
        DxActionSheet
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { ActionSheet } from 'devextreme-react/action-sheet';

class App extends React.Component {
    render() {
        return (
            <ActionSheet ...
                usePopover={true}
                target="#actionSheetTarget"
            />
        );
    }
}

export default App;

View Demo

See Also