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