Classic Task list in a Modern Page

At time of writing, SPO task lists have not been modernized so that it is selectable using the list web part on a modern page.

A workaround is to use CSS to change the look on a classic view of the task list and surface this page in an iFrame using the embed web part on a modern page.

1. Create a new classic web part page and add the task list view (e.g. my task view).
2. Open page in SPD and after the PlaceHolderMain tag add the following CSS for classic page:

    
    

   <style type=”text/css”>

   #s4-ribbonrow, .ms-cui-topBar2, .s4-notdlg, .s4-pr s4-ribbonrowhidetitle, .s4-notdlg noindex, #ms-cui-ribbonTopBars, #s4-titlerow, #s4-pr s4-notdlg s4-titlerowhidetitle, #s4-leftpanel-content,.ms-browseTabContainer, ms-cui-topBarMaximized, .ms-cui-ribbon, .ms-cui-menu, .ms-cui-toolbar-toolbar {display:none !important;}

   .s4-ca{margin-left:0px !important; margin-right:0px !important;}

   </style>

    
    

3. Open the modern page and where the task list web should be add an ’embed code’ webpart with the following code:

https://xxxxxx.sharepoint.com/sites/xxx/SiteAssets/MyTasksPage.aspx?IsDlg=1

[Note that ?IsDlg=1 removes top and left areas]