I’m currently having an issue with a project im working on. Im building an app and the home screen displays a map for part of the screen and the other part displays a list of data that is clickable for details. The problem is I cannot see all of my list, at the end of the list part of this is always cut off. On Android and IOS devices it’s even worse than in browser since they are working with a smaller resolution. Since this app is meant to work on many different devices Im staying away from hard pixel definitions for the sizes and using % and vh/vw for the sizing. No matter what combination of sizing I give it (50vh/50vh for map/list, 40vh/60vh for map/list 40vh/50vh for map/list, etc.) I think the remainder of my content is hiding under the tabs in browser/ios view but it bottoms past on android view too. I can’t get it to not hide under those tabs, If I add has-tabs, then theres a huge chunk of whitespace on the bottom of android phones and it still doesn’t reveal all of the last list-item in ios.
I just want the list to fit in the viewport I’ve spent days going back and forth on this with no luck and consistency. If I get it to fit in one environment, it definitely does not fit in the rest. Any help would be appreciated. Im attaching a codepen example that shows whats going on, there are 14 items in that list not 13, if you pull up at the end of the scroll you’ll see the darn #14 thing hidden underneath
Any help would be greatly appreciated!
Including codepen without leaflet to show its not related to my use of leaflet.
p.s. the list does not have that massive margin/padding between the items like it does on codepen and the issue is still there.