Offcanvas inside containers other than viewport

[iainhallam]

In some user interfaces, it's possible to make a drawer appear using any element with appropriate classes as the container, rather than the viewport. I'd like to use this to allow properties panes to easily be associated with different parts of the page, rather than needing to go to the window edge all the time.

A codepen for the sort of thing I'm after:

https://codepen.io/iainhallam/pen/vYywVev

If this is already possible, could it be added to the documentation, and if not, could this be a feature request, please?

[mdo]

I believe this is already possible, but a quick demo could be helpful for sure. Unsure what kind of potential issues the backdrop could introduce though. Might be something @GeoSot is already thinking about elsewhere.

[GeoSot]

@mdo when #33545 is landed, will be possible to have this feature, given a mark-up to constrain offcanvas & backdrop like below or something better

.offcanvas-parent {
  position: relative;
  overflow: hidden;

  .offcanvas {
    position: absolute;
  }
  .modal-backdrop {
    position: absolute;
    height: 100%;
    width: 100%;
  }
}

[rvanlaak]

@GeoSot given the above comment, you mean that Offcanvas now can be positioned relatively inside a parent?

My use-case would be to show an offcanvas pane at the right, inside of a content div that has menus around it on the top, left and bottom. The default Offcanvas behavior on the viewport now is to show the offcanvas positioned over the top and bottom menus.

So based on the TS codepen I tried to use your css snippet, but did not manage to position the Offcanvas inside of the "Content" div: https://codepen.io/rvanlaak/pen/dympKXQ

Update: Solved ✅ Managed to change the Codepen to show the offcanvas inside of the content div

[studiolxv]

@rvanlaak I'm late to the party, but is your Codepen outdated? This functionality seems to be broken.