Container/Element based media queries

[intellix]

I'm creating a site that has sidebar that can either be shown or hidden. When the sidebar is open, there's less space for the content so it makes sense that I change how things are displayed inside the main area.

Currently as far as I know, the Responsive API is all based off of the Viewport width. Is it possible to use the Responsive API for a specific container's width?

I imagine that it would require a directive to specify which container I'd like to target and then have all children pointing to that.

<sidebar fxFlex="300px" *ngIf="sidebarEnabled"></sidebar>
<section fxMediaContainer>
  <article fxFlex.sm="50%" fxFlex.md="33.333%" fxFlex.lg="25%"></article>
  <article fxFlex.sm="50%" fxFlex.md="33.333%" fxFlex.lg="25%"></article>
  <article fxFlex.sm="50%" fxFlex.md="33.333%" fxFlex.lg="25%"></article>
</section>

Added a plnkr of a dynamically visible navigation and chat. When both items are open, the container is very small and I would like to alter how the items inside are displayed: https://plnkr.co/edit/TENLYtc5BmUZC0sWliW7?p=preview

As a workaround/hack, it looks like I'll have to use the API to reduce the breakpoints when the sidebar is toggled

[ThomasBurleson]

You are interested in Constraint Grid CSS similar to the Mac OS Cassowary Autlayout.

That is not supported within @angular/flex-layout. That would best be done in @angular/constraint-layout... a solution which is already on our radar.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}