Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss

Specify Display Mode

By default, the ActionSheet comes up from the bottom of the page. If you set the usePopover option to true, the action sheet will pop over a certain element on the page. Use the target option 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