Pushpin and grid push/pull conflict

[lucafaggianelli]

Hi,

I have a right menu and the main content, on small devices I need the right menu to go on top and take the full width (s12), the main content goes below the menu and is also s12.

<div class="row">
  <div id="right-menu" class="col m4 push-m8 s12">
  </div>

  <div class="col m8 pull-m4 s12">
    <p>Content</p>
  </div>
</div>

Then I tried to pushpin the rightmenu:

var menu = $('#right-menu');
menu.pushpin({ top: menu.parent().offset().top });

The menu is correctly pushpinned and it's correctly pushed on the right side, but the main content is out of the view port on the left. Moreover on small device I don't want to pushpin it, how can I do?

Here the page with the menu I'd like to pushpin http://datalogic.github.io/tutorials/barcode-scanner-html5.html

Summarizing:

1. Is there any incompatibility with pushpin and grid push/pull?
2. How to not pushpin on small screens?

Luca

[acburst]

You should try and avoid adding things that will alter .col divs. Pushpin changes the position of the div which will break our grid system.

You can fix this by adding a wrapper class for your pushpin menu like this:

<div class="row">
  <div class="col m4 push-m8 s12">
    <div id="right-menu">
      right menu
    </div>
  </div>

  <div class="col m8 pull-m4 s12">
    <p>Content</p>
  </div>
</div>

[lucafaggianelli]

Thanks for the help! Actually I already have a wrapper, but is not working. Now I found a workaround setting #right-menu height to 1px, because the .col had a 0px height.

Any advice on how to unpin the menu on small screens? Is there a JS event for screen size change between S/M/L? so I can call pushpin('remove')... Sure I can listen to window resize, but I would avoid it

[fega]

Hello @lucafaggianelli Did you solve the issue?

Closed due inactivity, feel free to reopen it if it is still necessary.