What is the impact on positioning when including a class in Angular?

I've encountered a peculiar bug while trying to add a class to a ui-router element. When I apply the active class, an absolutely positioned element that spans the entire view suddenly snaps to the width of its parent.

To see the issue in action, check out the plunker example here

Here's a snippet of my code:

index.html

<body ng-controller="MainCtrl">
    <header>
      <span ng-click="toggleNav()">☰</span>
    </header>
    <nav ng-class="{active: navOpen}">
      <ul>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
      </ul>
    </nav>
    <section class="container" ui-view ng-class="{active: navOpen}"></section>
</body>

style.scss

nav {
  position: absolute;
  width: 100px;
  height: 100%;
  top: 25px;
  left: 0;
  background: gold;
  transform: translateX(-100px);
  transition: all .5s linear;
  &.active {
    transform: translateX(0);
  }
}

.container {
  width: 90%;
  margin: 0 auto;
  padding: 60px 0;
  transition: all .5s linear;
  &.active {
    transform: translateX(100px);
  }
  div {
    @extend header;
    height: auto;
    top: 25px;
    background: deepskyblue;
    padding: 10px;
    section {
      width: 90%;
      margin: 0 auto;
      span:last-child {
        float: right;
      }
    }
  }
}

app.coffee

app = angular.module 'plunker', ['ui.router']

app.config ($stateProvider) ->
    $stateProvider
      .state 'foo',
        url: ''
        templateUrl: 'foo.html'

app.controller 'MainCtrl', ($scope) ->
  $scope.navOpen = false

  $scope.toggleNav = ->
    $scope.navOpen = !$scope.navOpen

If anyone can provide some insight into this issue, it would be greatly appreciated!

Solution Found: Adjusted the width and auto margin to 5% left and right padding

Answer №1

Include overflow: hidden in the body style:

body{
  overflow: hidden;
}

Remove width: 90% from the container styling:

.container {
  margin: 0 auto;
  padding: 60px 0;
  transition: all .5s linear;
}

Answer №2

Personally, I tend to steer clear of using position:absolute as it can obscure the behavior of elements on a page. For example, it may make it difficult to notice that .ng-scope is adding a margin to your body element. To troubleshoot this, try removing the width: 100%; property and observe if any unnecessary space appears on both sides.

To resolve this issue, you can override the ng-scope class by adding:

.ng-scope { margin:0; }

at the end of your style.css file.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on adding up the value of a property within an array of objects using AngularJS

I am receiving an array of results from a Node.js API in my Angular app, and here is how it looks: <div *ngFor="let result of results"> <div *ngIf="result.harmattan.length > 0"> ... </div> <br> .. ...

Bottom section goes haywire in Chrome when clearfix is applied to a div above

When I remove the clearfix div above the footer, the text aligns correctly on Firefox. However, this causes issues with other elements on the page. It's puzzling how the clearfix is impacting the footer in this way... Here is a link to my page: ...

Is there a way to prevent the use of angular.reloadWithDebugInfo() in the browser console?

Is there a way to secure app scope variables from being accessed through the browser console? I've already disabled debug info using $compileProvider.debugInfoEnabled(false); But it seems like this setting can still be bypassed with reloadWithDebugIn ...

What is the protocol for displaying linear gradients that overlap?

My objective is to create a unique cutting corner effect using linear gradients. Achieving this on one corner is straightforward: body { background: #eac996; } .box { width: 100px; height: 100px; margin: 100px auto; padding: 20px; backgroun ...

Tips on adjusting the position of an icon within a dropdown list in HTML?

I have a search field on my webpage with an icon inside it. I managed to find some sample code for the icon. https://i.sstatic.net/WUOot.png However, I am struggling to position the icon to the right of the search box. I've tried adjusting the styli ...

Monitoring changes in SASS files using node-sass through NPM

I have node-sass installed with the options set according to the guidance provided in a response on Using node-sass watch option with npm run-script, however, I am facing issues with it not working as expected. Below is the content of my package.json file ...

Ways of incorporating text in a parallelogram shape

Here is the HTML code with ID attributes applied to both divs: <div id="herotext"> <div id="banner"></div> <h1 id="maintitle">Hey, I'm Charlie</h1> <p>This websi ...

Tips on adjusting the CSS to fix the scrolling issue caused by images in a carousel slider

I am facing an issue where a scroll is being created and it appears offset on different screen sizes: https://i.sstatic.net/KYTCN.jpg I need help to resolve this problem and make it responsive. Even after trying to add overflow: hidden; it still doesn&a ...

Updating ng-table within an Angular controller

Having encountered an unusual issue with ng-table. Here is a snippet of code from my controller: this.category = "Open"; this.category = ["Open", "Accepted", "Rejected"]; this.dataItems = []; var _this = this; this.$scope.$watch("vm.category", function( ...

Scrolling text blocks on mobile devices

When viewing the website on a desktop, everything works perfectly. However, when accessing it on a mobile device and trying to scroll down, only the text moves while the page remains stationary. The website utilizes skrollr core for animations. I have alre ...

I am having trouble with getting the templateUrl to function properly

Recently diving into Angular, I am currently working with Angular-UI-Router in combination with ASP.NET MVC 4. app.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) { $urlRouterProvider.other ...

Tips on halting the current animation and modifying styles upon hovering

Currently, I have a basic label featuring a contact number with a blinking animation. However, the animation is only a simple color transition at this time (see code below). I have managed to successfully pause the animation and revert the text back to it ...

AngularJS component downgraded without change detection

Currently, I am utilizing Angular's downgradeComponent for performance optimization purposes. You can find more information about it here: https://angular.io/api/upgrade/static/downgradeComponent. The Angular component I am working with is defined as ...

Issue encountered: Close functionality of Ionic popup not functioning as expected

I have developed an Ionic application that displays a popup window prompting users to rate the app if they have not done so previously. The Ionic popup is displaying correctly, however, the issue I am facing is that users have to click or tap the cancel bu ...

Utilizing a Bootstrap 3 modal within an AngularJS application with html5mode

How to display Bootstrap Modal in the first click when using html5Mode(true). When clicking on launch demo modal, the URL changes to /#myModal upon the 1st click but the modal does not appear. The modal only appears upon clicking launch demo modal again. ...

In Internet Explorer, regardless of how much scrolling occurs, the document.body.scrollTop property will consistently be

While moving the mouse, I'm showing the value of document.body.scrollTop in the status bar. However, I have noticed that this value is consistently 0 in Internet Explorer. Why is it always 0 in IE? Is there an alternative method to determine how far t ...

Tips on prefixing Bootstrap 4 classes to prevent conflicts with CSS classes

Recently, I've been focusing on creating small applications for websites. The websites hosting these apps may or may not use a css framework. To prevent any potential conflicts, I have decided to add a unique prefix to all Bootstrap classes. For insta ...

Is it possible to use v-if in conjunction with a style tag to specify a different source file? Alternatively, is there a more efficient method I

I attempted the example provided below, but unfortunately, it did not function as expected. The reason behind my endeavor is that adding numerous modifiers (--tuned) to achieve the desired outcome seemed impractical. Therefore, I decided to try and link ...

How can I align an input to the right using Bootstrap?

I found an example of a navbar that I liked and decided to copy it. Here is the code snippet: <div class="container"> <h3>Nawigacja zamknieta w kontenerze</h3> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> < ...

"Executing ng-click directive on a second click changes the route in AngularJS

Why does my ng-click only redirect to a new location on the second click? It should redirect to $location.path('/login.signin');, but it only works if I click the button again. It's strange. Where could this issue be originating from? Belo ...