In addition to the two existing core dialogs, the regular dialog and modal dialog, there is now a third dialog available, the Off-Canvas dialog. This dialog comes in from the side of the page and adjusts the width of the page so that the dialog does not cover any of the current page.
Here is example of how it looks in action.
Creating Off-Canvas links
Creating links that open in the off-canvas dialog is very similar to creating links that open the existing dialogs.
$my_link =[
'#title' => 'Click Me!',
'#type' => 'link',
'#url' => Url::fromRoute('off_canvas_test.thing2'),
'#attributes' => [
'class' => ['use-ajax'],
'data-dialog-type' => 'dialog',
'data-dialog-renderer' => 'off_canvas',
],
'#attached' => [
'library' => [
'core/drupal.dialog.ajax',
],
],
];
The only difference is the need to specify 'data-dialog-renderer' => 'off_canvas'.
Example Off-Canvas links can be found in the off_canvas_test test module in core.
Markup changes
To facilitate resizing the page contents to show the off-canvas dialog there is now a new <div> element wrapping the page element. The markup for this element is controlled by the off-canvas-page-wrapper.html.twig template file. This template adds an attribute data-off-canvas-main-canvas to the div which should not removed without breaking the off-canvas dialog JavaScript (the template has a warning about this).
| Attachment | Size |
|---|---|
| Tray animation | 732 KB |
| off-canvas select list issue.png | 29.2 KB |
Comments
can't insert custom div to <header>
when i insert custom div in page.html.twig right before
</header>in result DOM i have the div outside
<div class="dialog-off-canvas-main-canvas"i.e. outside
<header>though settings_tray module isn't enabled.
So in this case everyone should do it by js on $(document).ready event.
Turn off when views is producing a feed or xml?
My problem is that I'm using views to produce some custom RSS feeds and XML files, and now I have the dialog-off-canvas-main-canvas div enclosing it, thereby invalidating my feeds. I've tried doing URL specific template overrides, but it doesn't seem to allow for that. Not sure what to do.
Conflict with Bootstrap javascript
Thanks for the great feature.
Just raise an issue with Bootstrap theme.
Apparently, Bootstrap theme has its own dialog.ajax.js file that is the same name as core/drupal.ajax (/core/misc/dialog/dialog.ajax.js).
I am not sure if it is a problem, but I couldn't get the feature working with Bootstrap theme (https://www.drupal.org/project/bootstrap).
Is the Bootstrap 3 theme?
There is no Bootstrap 4 (yet - even though BS 4 has been around for a long time AND BS3 is pretty lame compared to BS4).
Or, is the issue with integrating Bootstrap (either 3 or 4)? I'm using Barrio and loading BS4 with that.
Select list overflow issue
The select list overflows while it is too long.
See the screenshot.
Risk of potential themes breakdown
Why is the wrapper always printed in page even if the Settings Tray module is disabled?
I think this `off-canvas-page-wrapper.html.twig` should be activated only if its Settings Tray module is activated. Or only under specific user permissions (e.g : only for editors and not anonymous for example).
I was developing a theme with the main layout grid based on flexbox and its layout has broken when I did the upgrade from 8.4 to 8.5 just because the new wrapper div has appeared from scratch! Does an official communication about the risk of potential themes breakdown has been written somewhere?
This broke two of my themes also
The solution for one of them was to add to my global stylesheet:
The other theme I hadn't figured out this fix yet and what I did is in several places where I had heights set as % units, I changed them to vh units.
MXT you're not alone, it was pretty frustrating for me as I had a deadline to show the theme I was working on and I had to spend time investigating and fixing something that was working perfectly well.
Thirded
This was a frustrating issue for us, to me.
Sincere question: Why is it there when the aforementioned module is disabled?
And another thing...
Not only that, why is it there for non-administration themes?
I feel you guys
This is the question I'm asking myself also... I have the same issue, I don't want a wrapper div around page render, especially not in non-admin themes.
Found in system.module
https://api.drupal.org/api/drupal/core%21modules%21system%21system.modul...
The last couple of lines in the system.module file.
I removed it with a custom
hook_element_info_alter()(which feels like a very hacky workaround/reset) but I find it a bad practice to force this on themes/sites that don't want to use it.agree with this.
agree with this.
this has just caused an issue with our installation set to auto updated non-breaking changes.
This will be tough to explain to the higher-ups why a non breaking change has broken something
Where is the documentation???
Awesome! This could be great tool if it was documented somewhere. Why isn't there a scrap of documentation on the Dialog API.
According to this tutorial, the "Dialog API" is now in core. Creating a modal in Drupal 8
A very simple yet functioning example is given... But, where are the docs?
Not thought through
While I appreciate the new feature, this is a breaking change for many themes.
Breaking changes should have been thought through, documented, and mitigated, considering the detrimental impact on others.
Nope.
Not okay to suddenly put an extra wrapper around everything. First thing I did was take it out again. Thanks a lot for wasting my time.
This change record is for 8.5
This change record is for 8.5!? There is a lot of useless noise on the list by publishing change records for unsupported versions.