Comments (2)
@Keagel unfortunately this is one of several known issues with using the App Shell. Basically the App Shell abstracts scrollable region to a sub-panel within the shell, rather than allowing the entire <body>
element to scroll. I've created a diagram to help visualize this:
Mobile Safari is setup to hide the bottom panel only when it detects the <body>
is being scrolled, which of course never happens in the App Shell.
You can see some discussion around the topic here:
https://stackoverflow.com/a/75648985
Sadly I don't think there's anyway to get the behavior you're asking while using the App Shell. Even setting different height values doesn't help here, because the <body>
never scrolls. For example, you can try something like:
<AppShell class="!h-[100svh]">
<!-- ... -->
</AppShell>
If you prefer the bottom panel to auto-hide on scroll, then I recommend you move away from the App Shell and create your own custom layout which leans into the body scroll. While a bit more effort, it will help avoid some other common App Shell related issues:
- Pull down to refresh not working on mobile (may be Android only)
- Print styles not working as expected
- Plus a few niche a11y issues
Furthermore, given these issues, we're actually taking a pretty hard stance on not bringing the App Shell forward to Skeleton v3. We're going to make the recommendation that folks construct their own custom layouts. So it would likely be advantageous to get a head start on this sooner than later.
Hope this helps, and sorry we can't do more!
from skeleton.
For now I'm not bothered by the bottom panel staying visible but I'll make the necessary changes since the App Shell won't be coming to v3. Thanks for the thorough answer!
from skeleton.
Related Issues (20)
- Package and doc issues to resolve HOT 3
- NEXT: Installation page misspells "configure" twice HOT 1
- Web site Theme Error On Arc HOT 3
- ListBox + Popup on a Modal HOT 5
- Tailwind v4 Oxide <--> Skeleton v3 HOT 6
- Chore: Add `environment info` request on bug tickets
- Standardize Dev Tooling and CI Pipelines HOT 15
- Some v2 doc images are not displaying HOT 1
- Integration: Data Visualization
- v3 Custom Theme Doc Errors
- v3 Tailwind > Gradients CSS button has broken link
- Review "RestProps" spread method for arbitrary attributes HOT 2
- v3 Switch Component - Quick Patch
- computed styles not being applied HOT 3
- Repeated word in Docs HOT 1
- Audio/video components
- Svelte v5 RC: InputChip component produces errors HOT 9
- v3 React AppBar does not follow export conventions HOT 1
- v3 - consistency -D and --save-dev HOT 6
- TreeView - Custom Icons. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from skeleton.