CODEWITHSUNDEEP
angularjsionic-framework
Shahzad Intersoft
Shahzad Intersoft

Reputation: 772

How to scroll page in ionic app in real device

Hello I am new in ionic app and I created a first page using following:->

<ion-modal-view>
<ion-view id ="login" hide-nav-bar="true">
    <ion-content  scroll="false">
     <div id="login_image" >
            <div class="header padding text-center logodata">
                <img src="img/front-logo.png" alt="Your logo here"  width="60%" height="auto" class="logoImage"/>
            </div>

            <div class="header padding text-center panda">
                <img src="img/bear.png" alt="Your logo here" width="47%" height="auto"/>
            </div>

            <h1 class="getstarted" style="text-align:center">Get Started !</h1>
        </div>
          <form ng-submit="doLogin()" name="loginForm">
            <div class="row responsive-md">
                <div class="col col-50 col-offset-25">
                    <div class="list">
                        <label class="item item-input">
                      <i class="fa fa-user fa-6" aria-hidden="true"></i>
                       &nbsp; &nbsp;<input type="email" ng-model="loginData.username"  placeholder="" required>

                        </label>
                        <label class="item item-input">
                       <i class="fa fa-lock fa-6" aria-hidden="true"></i>
                         &nbsp; &nbsp;<input type="password" placeholder="" ng-model="loginData.password" required> 
                        </label>

                      <button class="button button-block button-positive sign_in" type="submit" ng-disabled="loginForm.$invalid">
                        SIGN  IN
                    </button>

                    <div class="signup"><center class="insignup"><span class="donaccount">Don't have an account ?</span>  <a href ng-click= "dashBoard()"  class="achorsignup"> SIGN UP</a></center><div>
                    </div>
                </div>
            </div>
        </form>
    </ion-content>
</ion-view>

</ion-modal-view>

then I see the design in virtual device means in my laptop it look properly by scrolling

But When I run in android phone it look like this no scroll option is showing how to see full home page in android phone

Upvotes: 1

Views: 303

Answers (2)

Manoj Patidar
Manoj Patidar

Reputation: 1171

ion-Scroll Can be used in places where you may not need a full page scroller, but a highly customized one, such as image scubber or comment scroller.

<ion-scroll scrollX="true">
</ion-scroll>

<ion-scroll scrollY="true">
</ion-scroll>

<ion-scroll scrollX="true" scrollY="true">
</ion-scroll>

More info refer this

Upvotes: 1

PRANSHU MIDHA
PRANSHU MIDHA

Reputation: 472

You have to set the value of scroll attribute to true if you want to make the page scroll.

<ion-content  scroll="true">

Hope this helps!

Upvotes: 0

Related Questions