2

Question Background:

I have an Angular app that has 2 views, Using UIRouter I swap in the view that the URL is routed too

Within my views I am using Jasny Bootstrap to produce an off canvas menu 'push' menu, as shown:

https://codepen.io/rugor/pen/eiyzh

This add's a style to the body tag when the menu is revealed as shown:

<body translate="no" class="canvas-slid" style="position: relative; left: 300px; overflow: hidden; right: -300px;">
     // Other HTML
</body>

The Issue:

I have the following Index.html View that is used as the main ui-view container for each of my apps pages to be injected in to:

<body ng-app="app">
    <div ui-view>
       //Views injected here when routed.
    </div>
</body

If I browse to my homepage i.e Home.cshtml, I am met with the following page:

enter image description here

body style for the Homepage:

<body ng-app="app" class="ng-scope">
   //Homepage Html

I then browse to the Update.html page and reveal the Jansy Off Canvas menu:

enter image description here

Note that the body tag of the Index.cshtml page has had the following style added for the revealing of the off canvas menu:

<body ng-app="app" class="ng-scope canvas-slid" style="position: relative; left: 300px; overflow: hidden; padding-right: 17px; right: -300px;">
</body>

This is where the issue starts.

If I now click the back button on the browser with the Jansy off canvas menu revealed then the body style is not removed from the body tag, as shown:

enter image description here

the body style is still applied:

<body ng-app="app" class="ng-scope canvas-slid" style="position: relative; left: 300px; overflow: hidden; padding-right: 17px; right: -300px;">
</body>

How should I overcome this issue? Can I remove any style on the body tag in the ui-view Index.html when a use user click the back button on their browser? If so how?

I understand why this is happening, and if the user were to close the off canvas menu and clicked back the issue would not occur.

As the body is shared between the Views I need a way of clearing the styling on a back click press to effectively reset it to nothing.

user1352057
  • 3,162
  • 9
  • 51
  • 117
  • This could be helpful until u find a better way of doing things: http://stackoverflow.com/questions/20899274/how-to-refresh-page-on-back-button-click – tam5 Jun 24 '16 at 22:20
  • @user1352057: Check my answer if you find it helpful! – Rahul Arora Jul 03 '16 at 14:26

3 Answers3

4

You can add listener to $rootScope for locationchangestart or locationchangesucess event (https://docs.angularjs.org/api/ng/service/$location) or statechangestart/statechangesuccess https://github.com/angular-ui/ui-router/wiki) and remove class from body.

To be more fancy you can implement it as directive on body element:

<body mydirective>

    app.directive(mydirective,
 ...
    link : function(scope, element, attrs) {
        scope.$on('$stateChangeStart', function () {
            element.removeClass("canvas-slid");
        }
    }
Petr Averyanov
  • 9,327
  • 3
  • 20
  • 38
1

Actually, it is a small issue with jasny-bootstrap plugin and here i'm giving a temporary solution to remove the style. 

var _enableScrolling = $.fn.offcanvas.Constructor.prototype.enableScrolling;
$.fn.offcanvas.Constructor.prototype.enableScrolling = function () {
 _enableScrolling.apply(this, arguments);
 $('body').css({
        'overflow': '',
        'padding-right': '' 
    });
 }

But you can check it out with master branch of jasny-bootstrap for the actual fix

jasny-bootstrap ui stlye remove

Anand
  • 99
  • 10
  • Thanks for your reply. I have added your code above in a script tag of my Index.html page but the issue is still present. – user1352057 Jun 25 '16 at 15:23
1

You can try removing that inline CSS using jquery when you press the back button. So basically whatever controller loads when you press the back button, try adding this code to it.

$('body').removeAttr("style")

It will remove any inline styling applied to the body tag

Rahul Arora
  • 4,503
  • 1
  • 16
  • 24