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
    ],
    // ...
})

View Demo

See Also