DevExtreme React - 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