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>
    

Log in to reply