Search code examples
cssangularjsposition

Angular JS - View Scrolling Issue *CSS*

So my problem is that I have set my view to be width & height 100%; which works well but once some of the content within the view causes a scrollbar to appear it scrolls into whitespace. As if the view's overflow is hidden but the content is still making the page scroll.

I was unable to make a fiddle since I required multiple html files to load and render views so Ill post some code and images about the issue and hopefully someone can catch the problem. I suspect it is most likely a CSS issue with my positioning system but I have been unable to resolve it.

::HTML::

!!!this is the Index page

<!DOCTYPE html>
<html ng-app="appMain">
    <head>
        <title>MY APP</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >

        <!-- CSS imports -->
        <link href="css/style.css" rel="stylesheet" type="text/css" />

        <!-- JS imports -->
        <!-- Angular JS Primary Scripts -->
        <script src="scripts/angular.js"></script>
        <script src="scripts/angular-ui-router.js"></script>

        <!-- Angular JS subScripts for controllers etc. -->
        <script src="main.js" ></script>
    </head>

    <body>
        <div class="makeBackground" ui-view></div>
    </body>
</html>

!!!!this is the sign-in.html page:

<div class="loginBackground makeBackground"></div>
    <div class="transparentContainer">

</div>

::JS - Module::

(function() {

var appMain = angular.module('appMain', ['ui.router']);

swiftMain.config(function($stateProvider, $urlRouterProvider) {

  // if url not defined redirect to login
  $urlRouterProvider.when('', "/sign-in");
  // if nonexistant url defined redirect to sign-in
  $urlRouterProvider.otherwise("/sign-in");

  // Now set up the states
  $stateProvider
    .state('sign-in', {
      url: "/sign-in",
      templateUrl: "templates/views/sign-in.html"
    });
});

}());

::CSS::

.makeBackground {
    position: relative; top: 0;
    width: 100%; height: 100%;
}
.geminiBlue {
    background-color: #074d77;
}
/* fancy 'e' bg on login background and courselist */
.loginBackground {
background-image: url(../images/login_back.png), url(../images/geminiBlue.png);
background-position: center top, left top;
background-repeat: no-repeat, repeat;
}

.transparentContainer {
    border-radius: 20px;
    background-color: rgba( 255,255,255,0.4 );
    width: 500px;
    height: 600px;
    position:absolute;
    z-index:15;
    top:50%;
    left:50%;
    margin:-300px 0 0 -250px;
}

the CSS above shows that the transparentContainer class has a fixed width and height that will create a scroll at lower resolutions; but the view allows the scroll and hides the content as can be seen below here: imageenter image description here

How to get the view to expand with the content within it?

Solution

  • Resolved: The Issue was the css. by setting the top level containers overflow property to hidden and using margins instead of position: relative; with pixel adjusts my content now fits within the page.