angular, angular-snap.js, toggle button click hide/show behavior should not effect header and menu

Question

I am using angular-snap.js for my vertical slider. The problem I am facing is that the snap-content and snap-drawer Toggle buttons are appearing and functioning from the top of a page (even above the header and menu). I would like this snap-drwaer and snap-content should appear below the menu bar and when I click toggle button it should not cause drag effect on header and menu part. Can any one suggest me, how to achieve this with angular-snap.js? Please find the plunker at http://plnkr.co/edit/usbx8yP1fXMJleR3iqZ8?p=preview. The following snap-drawer and snap-content should appear and function below menu bar only,the toggle button should not cause header and menu to be hidden/showon toggle button click. The header and menu should always remain as it is without getting effected with the drag behavior of snap-drawer and snap-content.

    <snap-drawer>
    <button snap-toggle>Another Toggle Button</button>
    </snap-drawer>

    <snap-content snap-options="{tapToClose:false}">
    <button snap-toggle>Toggle</button>   
    </snap-content>

Please let me know, if I need to make any further clarification to make my question clear?

CanIHazCookieNow · Accepted Answer · 2014-08-21 10:44:13Z

1

I'm having the same problem and the solution I came up with was to set the header as a fixed element.

You can see the code here http://plnkr.co/edit/brN1fNbPtm3Ad0pP4zKG?p=preview

<div class="wrapper" style="position:fixed;z-index:100;top:80px;">
...
<snap-drawer style="top:150px">
...
<snap-content style="top:150px" snap-options="{tapToClose:false}">

The css changes were made straight on the html file so it will be easier for you to check what I changed.

Not the perfect solution so if somebody comes up with a better one, please share.

answered Aug 21, 2014 at 10:44

CanIHazCookieNow

1721 silver badge15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

smart987 Over a year ago

How can extend snap-drawer width? I noticed when I click snap-toggle button in snap-content, transform: translate3d(266px, 0px, 0px) is getting replaced in style attribute, I want it to be translate3d(700px, 0px, 0px). Where exactly I need to make the change I am not sure. I made some trail and error but it is not working.

Collectives™ on Stack Overflow

angular, angular-snap.js, toggle button click hide/show behavior should not effect header and menu

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related