Monaca Onsen UI Discord Chat Github Repo

ons-progress-bar moves the elements down



  • I have a little problem. When I show <ons-progress-bar>, the elements then move 1px down.
    I’m using the ng-show attribute with AngularJS 1.6.1.

    <!doctype html>
    <html lang="en" ng-app="my-app">
    <head>
    	<title>App</title>
    	<meta charset="utf-8">
    
    	<!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
    	
    	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>
    
    </head>
    <body>
    	<ons-page ng-controller="ExampleController">
    		<ons-toolbar>
    		<div class="left">
    			<ons-back-button>Atras</ons-back-button>
    		</div>
    		<div class="center">
    			Hello
    		</div>
    		</ons-toolbar>
    		<ons-progress-bar indeterminate ng-show="loading"></ons-progress-bar>
    		<div style="text-align:center">
    			<p><ons-input modifier="underbar" type="text" placeholder="Name" float></ons-input></p>
    			<p><ons-button ng-click="showProgress()">Button</ons-button></p>
    		</div>
    	</ons-page>
    
    	<script type="text/javascript">
    	var app = angular.module('my-app', ['onsen']);
    	app.controller('ExampleController', function($scope) {
    		$scope.showProgress = function(){
    			$scope.loading=true;
    		}
    	});
    	</script>
    
    </body>
    </html>
    

    Why is this happen?
    Thank you!



  • I’ve solved it.
    Just put the visibility property in the element <ons-progress-bar>

    <!doctype html>
    <html lang="en" ng-app="my-app">
    <head>
    	<title>App</title>
    	<meta charset="utf-8">
    
    	<!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
    	
    	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>
    
    </head>
    <body>
    	<ons-page ng-controller="ExampleController">
    		<ons-toolbar>
    		<div class="left">
    			<ons-back-button>Atras</ons-back-button>
    		</div>
    		<div class="center">
    			Hello
    		</div>
    		</ons-toolbar>
    		<ons-progress-bar id="bar" indeterminate style="visibility: hidden;"></ons-progress-bar>
    		<div style="text-align:center">
    			<p><ons-input modifier="underbar" type="text" placeholder="Name" float></ons-input></p>
    			<p><ons-button ng-click="showProgress()">Button</ons-button></p>
    		</div>
    	</ons-page>
    
    	<script type="text/javascript">
    	var app = angular.module('my-app', ['onsen']);
    	app.controller('ExampleController', function($scope) {
    		$scope.showProgress = function(){
    			var element = document.getElementById("bar");
    			element.setAttribute("style", "visibility: visible;");
    		}
    	});
    	</script>
    
    </body>
    </html>