Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

View offset on input focus #1486

Closed
bostondv opened this issue May 23, 2014 · 2 comments
Closed

View offset on input focus #1486

bostondv opened this issue May 23, 2014 · 2 comments

Comments

@bostondv
Copy link

I have an app running on Android 4.3 and 4.4 devices with beta 6. When focusing on an input in the login form the entire moves to the left approximately 20 pixels. It remains offset until navigating to a different route.

I am not able to reproduce it 100% of the time. For example I have a sign up accessed from the initial login page and the issue does not happen on the sign up page.

I've also only noticed this since upgrading from beta 4 to beta 6, pretty certain the issue was not present in beta 4.

Here is the login page markup from chrome dev tools inspector and screenshot attached.

<body class="platform-webview platform-cordova platform-android platform-android4 platform-android4_3 grade-b platform-ready keyboard-open">

    <div class="view" ng-transclude="">
      <!-- Center content -->
      <ion-side-menu-content class="menu-content pane disable-user-behavior">

        <ion-nav-bar class="bar-calm nav-title-slide-ios7 bar bar-header nav-bar disable-user-behavior  no-animation">
          <ion-nav-back-button class="button-icon ion-arrow-left-c button back-button ng-hide" ng-click="goBack()"></ion-nav-back-button>
          <!-- ngIf: sideMenuEnabled() -->
          <!-- ngIf: showNavbarLogo() --><div class="navbar-logo" ng-style="{'background-image':'url('+$storage.brandingOptions.logoNavbarURL+')'}" ng-if="showNavbarLogo()" style="background-image: url(http://powerpitch.prondo.mobi/app/uploads/sites/7/2014/04/AVNET-INC-sRGB-600x210px-white.png);"></div><!-- end ngIf: showNavbarLogo() -->
        <div class="buttons left-buttons"> </div><h1 ng-bind-html="title" class="title ng-binding" style="left: 370px; right: 370px;"></h1><div class="buttons right-buttons"> </div></ion-nav-bar>

        <ion-nav-view animation="slide-left-right-ios7"><ion-view hide-back-button="true" class="pane" title="">
  <ion-content padding="true" class="content-centered scroll-content ionic-scroll  has-header"><div class="scroll padding" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
    <div class="row responsive-md">
      <div class="col col-50 col-offset-25">
        <div class="card">
          <!-- ngIf: success -->
          <!-- ngIf: error -->
          <div class="item">
            <form name="login" ng-submit="tryLogin()" novalidate="" class="ng-pristine ng-invalid ng-invalid-required">
              <div class="list">
                <label class="item item-input item-icon-right">
                  <span class="input-label">Username</span>
                  <input type="text" ng-model="credentials.username" required="" class="ng-pristine ng-invalid ng-invalid-required">
                  <!-- ngIf: login.username.$invalid && register.username.$dirty -->
                </label>
                <label class="item item-input item-icon-right">
                  <span class="input-label">Password</span>
                  <input type="password" class="cloned-text-input" readonly=""><input type="password" ng-model="credentials.password" required="" class="ng-pristine ng-invalid ng-invalid-required previous-input-focus">
                  <!-- ngIf: login.password.$invalid && register.password.$dirty -->
                </label>
              </div>
              <button type="submit" class="button button-block button-positive">Login</button>
            </form>
          </div>
        </div>
        <div class="text-center">
          <a class="button button-clear" href="#/register">Sign Up</a>
          <a class="button button-clear" href="#/password-reset">Forgot Password?</a>
        </div>
      </div>
    </div>
  </div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="height: 313px; -webkit-transform: translate3d(0px, 0px, 0px) scaleY(1);"></div></div></ion-content>
</ion-view>
</ion-nav-view>

        <!-- ngIf: !$storage.online -->

        <!-- ngIf: showEmailBar() -->

      </ion-side-menu-content>

      <!-- Right menu -->
      <ion-side-menu side="right" is-enabled="sideMenuEnabled()" width="275" class="menu menu-right" style="width: 275px;">
        <ion-header-bar class="bar-dark bar bar-header disable-user-behavior">
          <h1 class="title">Menu</h1>
        </ion-header-bar>
        <ion-content class="scroll-content ionic-scroll  has-header"><div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
          <!-- ngIf: selectedTermNames.length -->
          <!-- ngIf: $storage.hasIntro -->
          <div class="list">
            <div class="item item-divider ng-binding"></div>
            <!-- ngIf: showNotifications && $storage.online --><div class="item item-icon-left item-toggle" ng-if="showNotifications &amp;&amp; $storage.online" ng-click="toggleNotifications()">
              <i class="icon ion-email"></i>
              Notifications
              <label class="toggle">
                <input type="checkbox" ng-checked="$storage.notificationsEnabled" checked="checked">
                <div class="track">
                  <div class="handle"></div>
                </div>
              </label>
            </div><!-- end ngIf: showNotifications && $storage.online -->
            <!-- ngIf: $storage.online --><a menu-close="" class="item item-icon-left" href="#/feedback" ng-if="$storage.online">
              <i class="icon ion-chatbubbles"></i>
              Send Feedback
            </a><!-- end ngIf: $storage.online -->
            <!-- ngIf: $storage.online --><a menu-close="" class="item item-icon-left" href="#/password-change" ng-if="$storage.online">
              <i class="icon ion-locked"></i>
              Change Password
            </a><!-- end ngIf: $storage.online -->
            <a menu-close="" class="item item-icon-left" ng-click="logout()">
              <i class="icon ion-log-out"></i>
              Logout
            </a>
          </div>
        </div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="height: 0px; -webkit-transform: translate3d(0px, 0px, 0px) scaleY(1);"></div></div></ion-content>
      </ion-side-menu>
    </div>
    <script>app.init();</script>


<div class="backdrop"></div></body>

screenshot_2014-05-23-14-43-07

Thanks
@bostondv
Copy link
Author

After further research I found the issue was due to a fix I applied for #1278. I had added .pane, .view { overflow: visible; }, with that removed the issue resolved itself.

@ionitron-bot
Copy link

ionitron-bot bot commented Sep 6, 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 6, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@bostondv