ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.03k stars 13.51k forks source link

<ion-content class="has-footer"> not working on ionic 4 beta 2 #15133

Closed MrBokeh closed 5 years ago

MrBokeh commented 6 years ago

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.0.6 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.3
   @angular-devkit/schematics : 0.7.3
   @angular/cli               : 6.1.3
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.4

System:

   NodeJS : v8.11.3 (/usr/local/bin/node)
   npm    : 6.3.0
   OS     : macOS High Sierra

Describe the Bug <ion-content class="has-footer"> not working on ionic 4 beta 2 It used to make sure the footer won't hide stuff of the list of the list is longer than the screen, it is a must feature for any chat apps with auto scroll to bottom

Steps to Reproduce Steps to reproduce the behavior:

  1. create ion-list
  2. keep adding item to ion-list
  3. auto scroll to bottom with the ion-content
  4. the footer is hiding the last item behind so the auto scroll to bottom is always missing the last item

Related Code

Expected Behavior if I add has-footer as a class with ion-content, it shoud fix the issue like ionic 3.9.2 <ion-content class="has-footer">

Additional Context

manucorporat commented 6 years ago

I don't understand, i don't remember we had an API like .has-footer. Can you provide additional information about what you want to accomplish, screenshots welcome.

MrBokeh commented 6 years ago

Here is the scenario, if I am adding more items on the ion-list and the total height of the content is over the screen height, the list item will go underneath the footer but not the header. The problem is if I try to auto scroll to the bottom of the list whenever I add an item like a chat history, I will call the scrollToBottom function of the scroll element of the content, it will scroll to the bottom of the list but the last one is blocked the footer and hided hehind the footer. I don’t want any content go behind the footer, is there a way to add some css or set an attribute to make sure no content will go underneath the footer like the header?

paulstelzer commented 5 years ago

I close this because as manu says there is no has-footer. If you want it as feature, open a new issue as feature request

ionitron-bot[bot] commented 5 years ago

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.