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.

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

Ionic 2: Beta 8 - scrollable content area cutting off button at bottom #6839

Closed
daveshirman opened this issue Jun 10, 2016 · 1 comment
Closed
Assignees
Milestone

Comments

@daveshirman
Copy link

daveshirman commented Jun 10, 2016

Short description of the problem:

When launching a Modal window, the scrollable content area does not account for the presence of the toolbar properly.

When I comment out the ion-toolbar at the top, the button is then fully visible
So I think that ion-toolbar height is not being taken into account.
You can see that the button is partially visible on iOS but not at all on Android:

screen shot 2016-06-10 at 12 41 42

untitled

What behavior are you expecting?

Button at bottom to be visible at all times.

<ion-toolbar>    
  <ion-title>Page 1</ion-title>
  <ion-buttons start>
    <button>
      <span primary showWhen="ios">cancel</span>
      <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
    </button>
  </ion-buttons> 
</ion-toolbar>

<ion-content>

  <ion-item-group>
    <ion-item-divider light>Some group:</ion-item-divider>    
    <ion-row>
      <ion-item>
        <ion-label stacked>field 1:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>
    <ion-row>
      <ion-item>
        <ion-label stacked>field 2:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>    
  </ion-item-group>    

  <ion-item-group>
    <ion-item-divider light>Some group:</ion-item-divider>    
    <ion-row>
      <ion-item>
        <ion-label stacked>field 1:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>
    <ion-row>
      <ion-item>
        <ion-label stacked>field 2:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>    
  </ion-item-group>

  <ion-item-group>
    <ion-item-divider light>Some group:</ion-item-divider>    
    <ion-row>
      <ion-item>
        <ion-label stacked>field 1:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>
    <ion-row>
      <ion-item>
        <ion-label stacked>field 2:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>    
  </ion-item-group>

  <ion-item-group>
    <ion-item-divider light>Some group:</ion-item-divider>    
    <ion-row>
      <ion-item>
        <ion-label stacked>field 1:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>
    <ion-row>
      <ion-item>
        <ion-label stacked>field 2:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>    
  </ion-item-group>

  <ion-item-group>
    <ion-item-divider light>Some group:</ion-item-divider>    
    <ion-row>
      <ion-item>
        <ion-label stacked>field 1:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>
    <ion-row>
      <ion-item>
        <ion-label stacked>field 2:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>    
  </ion-item-group>  




  <div>
      <button full complete>Submit</button>
  </div>
</ion-content> 

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
http://stackoverflow.com/questions/37746242/ionic-2-beta-8-scrollable-content-area-cutting-off-button-at-bottom

Which Ionic Version?
2.0.0-beta.8

Plunker that shows an example of your issue

Note: I'm unable to get this to break in plunkr. Don't know why.
http://plnkr.co/edit/MBFjrCIt1lrwYAOnz4nw?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)
Davids-MacBook-Air:AppHazard daveshirman$ ionic info

Your system information:

Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-beta.8-201606091959
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.3.0
Xcode version: Xcode 7.2.1 Build version 7C1002

@brandyscarney
Copy link
Member

Thanks for the issue! This will be fixed in the beta 9 release.

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

No branches or pull requests

3 participants