'Apache cordova ios footer issue

I am new to angular and cordova. I converted my angular web application to mobile application using cordova.

i am facing footer issue in ios. I have searched in google, but nothing help for me. Can anyone please help me to solve the footer issue in ios.

Config.xml

<preference name="DisallowOverscroll" value="true" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />

index.html

  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />

info.plist

<key>UIRequiresFullScreen</key>
    <false/>
    <key>UIStatusBarHidden</key>
    <false/>

also i can see in google, everyone said add the below line in css file. but i am not sure, which file i can add the below line. can anyone please help me to let me the file and fix the footer issue.

body {
    padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    
}
.header { 
    position: fixed; 
} 
.footer { 
    position: fixed; 
} 
.fixfixed .header, 
.fixfixed .footer { 
    position: absolute; 
} 

.toolbar-footer{
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    position: fixed;
}

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source