One issue I'm facing is that when the content within my view causes a scrollbar to appear, it scrolls into whitespace even though the view's overflow is hidden. I suspect it might be a CSS problem related to my positioning system.
Unfortunately, I couldn't create a fiddle due to the need for multiple HTML files to load and render views. So, I'll provide some code snippets and images of the issue in the hope that someone can help me identify the problem.
::HTML::
!!!This is the Index page
<!DOCTYPE html>
<html ng-app="appMain">
<head>
<title>MY APP</title>
<meta charset="UTF-8">
<!-- CSS and JS imports are listed here -->
</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) {
// State configurations are defined here
});
}());
::CSS::
.makeBackground {
position: relative; top: 0;
width: 100%; height: 100%;
}
.geminiBlue {
background-color: #074d77;
}
/* More CSS rules follow */
.transparentContainer {
border-radius: 20px;
/* Styling details for transparentContainer */
}
The CSS above indicates that the transparentContainer class has fixed dimensions that may cause scrollbars at lower resolutions. How can I make the view expand with its content?