I am currently working on developing an app using Ionic and AngularJS. I am facing a challenge with the bar-footer overlapping the content at the bottom of the page. I want the content to be fully visible before the footer appears, without any overlap. Can anyone suggest which property I should use to achieve this? I have already tried various options related to the position property but none seem to work for me. Here is a screenshot demonstrating the issue:
As you can see in the image, the last item in the list is being obscured by the footer. Thank you in advance for your assistance! :)
--EDITED (code provided):
<ion-content>
<ion-list class="pagina">
<a class="item item-thumbnail-left" ng-repeat="poblacio in poblacions" href="#/app/ambFiltreActivitats" ng-click="doGuardarPoblacio(poblacio.title)">
<img style="width:50px; height:auto; margin-left: 60px;" ng-src="{{poblacio.url}}"/>
<br/><br/>
<b>{{poblacio.title}}</b>
</a>
</ion-list>
</ion-content>
<div class="bar bar-footer">
<div class="title"></div>
</div>
I have only applied the background-color CSS property. When I try using position: relative, the footer disappears completely. If I use absolute or fixed, the issue remains as depicted in the image link.