A fake media query for responsive panes

[mohsen1]

trafficstars

I would like to apply different classes for different ranges of width/height of a pane. If I had the width attribute in scope I could do:

<div ui-layout>
  <div ng-class="{
    small: width < 100,
    medium: width > 100 && width < 400,
    large: width > 400
  }"></div>
</div>

But I don't have access to width which is internal to directive.

A better solution would be some sort of fake media query to make it easier to write such code. One solution could be this:

<div ui-layout>
  <div size-class="{
  small: { max: 100 }, 
  medium: {min: 100, max: 400},
  large: {min: 400}
  }"></div>
</div>

Above solution is vertical/horizontal independent and doesn't need exposing width

[ticlaudeberube]

Same here. Is there a way to reset the options from the page controller? Or even a public reset method to pass the option in depending the viewport.

[tristanz]

One alternative is https://github.com/kumailht/responsive-elements.

[ticlaudeberube]

I had it working with the latest update. Just put a sniffer at the controller with a {{}} in the partial view.

$scope.panes = { sizes: { left: '50%', right: '50%', splitTop: '50%', dividerSize: '14' }};

ui-layout-container size="{{panes.sizes.left}}" id="schematic" class="row schematicPanel ui-layout-container size="{{panes.sizes.left}}"

[jongunterfv]

I was struggling with this issue, and I ended creating a fake media query system that was really buggy. Then I realized using Flexbox for the layout inside the view fit the bill for my needs. Might want to give a try.

[jmls]

@jongunterfv : would you mind giving an example of how you got this to work ? thanks!