CODEWITHSUNDEEP
iosangularcapacitor
Neroshan Vimaleswaran
Neroshan Vimaleswaran

Reputation: 31

How to Prevent content displayed above the safe area when scrolled in iOS app build using capacitor?

I am building a mobile app from my angular project using capacitor without ionic. Since the app goes to full screen in iPhone the app overlaps the status barto fix that I have configured in capacitor.config.json as "ios": { "contentInset": "automatic" }

After adding the contentInset: automatic my layout is properly laid. But when i scroll up the scrolled content is displayed in the status bar since iphone have transparent status bar. Is there any way to hide the scrolled content in status bar while scrolling?

enter image description here

Upvotes: 2

Views: 3792

Answers (3)

pcsantana
pcsantana

Reputation: 639

I was facing the same problem! I solved it and posted the solution here:

https://stackoverflow.com/a/78385858/6031927

Give it a try.

Upvotes: 0

emich
emich

Reputation: 653

In Capacitor 5, you can use the contentInset property set to always in the iOS settings in capacitor.config.json:

"ios": {
    "contentInset": "always"
},

I found you also have to use 100dvh and 100dvw in the CSS to make sure you get heights and widths within those bounds.

Upvotes: 0

nghiahoang
nghiahoang

Reputation: 568

you need to set:

scrollView.clipToBounds = true

Upvotes: -1

Related Questions