1

I've been implementing an answer that was asked about resizing a div width here:

Angular JS resizable div directive

This answer sets up a nice little directive that resizes divs, using 

    $($attrs.resizerLeft).css({
        width: x + 'px'
    });
    $($attrs.resizerRight).css({
        left: (x + parseInt($attrs.resizerWidth)) + 'px',
        width: (parseInt(window.innerWidth - x)) + 'px'
    });

However, I want to have a resizable div and also use media queries to rearrange the content as the div is resized. So I've taken the centre div and added in some simple Boostrap columns, but the media queries do not fire when the resizer changes the div widths.

Here's a plunk with an example of the problem:

http://plnkr.co/edit/1A7URWAQPl23FZy45Gxp?p=preview

Is there any way to have the resizer trigger the media queries that Bootstrap uses to rearrange the layout?

Community
  • 1
  • 1
RamblerToning
  • 926
  • 2
  • 13
  • 28
  • 4
    Media queries don't "fire", and they can't be "triggered" manually. They're not scripts. Also, you can't tie them to element widths. Instead, add a class to the body or some other ancestor element and select from that. – isherwood May 17 '16 at 15:58

0 Answers0