Hi Everyone,
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.
Have you tried using percentages on mapContainer and listContainer?
.mapContainer{
height:50%;
}
.listContainer{
height:50%;
}
I tested this on an iPhone 5 and nexus 5 and it looked fine to me: http://codepen.io/brandyshea/pen/eNramo
1 Like
wow first off thank you it now works! secondly …this was the first thing i tried I have built the rest of the entire application using percents so I am quite mad at myself 
The problem was the angular leaflet directive did not accept % for sizing it other than 100%(anything else would cause the map to dissapear) it only accepted vh and vw so I was using vh and vw to size via the arguments in the directive itself. I had tried resizing the div container before but I was sizing the leaflet directive as well at that point with its width and height attributes and lower than i think its 40vh of the entire viewport the map goes sqonky and dissapears entirely. I only recently realized the width and height arguments of the directive followed the dimensions of the container unlike alot of other third party directives i’ve tried which will override a container style and used the supplied dimensions to override(a number of alternative google maps examples and directives i tried for example) leaflet was my last choice as my map directive so I had assumed it was the same, When I had sized the div on top of already restricting the height on the directive itself it produced very undesirable results(map dissapearing, or oddly sized maps with white space).
I realize now what was different from trying %'S now to trying then after going over my commits. It was simply assigning the size to the div that wraps my map container via the mapcontainer style and then giving 100% both to width and height in the directive. I had figured out it was providing the appropriate dynamic resizing but since I haven’t built anything but exportable reports in html in close to 15 years I’m not aware of all the nuances of styling. I assumed vh and vw we’re the normal css way of doing what the %'s do but clearly via your suggestion i was wrong hah.
Again a huge thank you for giving me the answer to this problem, I am trying to pick up all the best practices and methods for using css that I missed and while going through trial and error after spending days upon days this last month and a half I was at the point that I was only trying new things to get it to work not trying old unsuccessful things from my first attempts after refactoring my code. I still don’t understand why % works and vh and vw doesn’t but this was the only broken part of my application and im on a deadline so im just going to be thankful and aware for next time!
I understand. 
I think we’ve all been there.
The reason the percentage works and vh does not in this particular case basically comes down to having the header and tabs. When you are giving it 50vh you are telling it to take up half of the visible viewport height, which doesn’t account for the fact that there is a header and tabs that take up some of this visible height. Say for example, your viewport height is 870px, you set each container to 50vh and this makes them each have a height of 435px. This makes sense, because those two heights add up to 870px. However, the <ion-content> (which is wrapping these two containers) is only 775px height (in this case), because it takes up the entire height minus the header’s height (44px) and the tab’s height (49px) and then some height for the borders (2px). As you scroll down in the list you never reach the bottom because the containers will add up to 870px, but the content will only let you scroll down until you hit the bottom of the 775px height container.
In the same way that the <ion-content> does it, you could calculate the height by subtracting these components from the 50vh, and it would also work. I just prefer not to hard code these heights when <ion-content> is already taking care of it:
.mapContainer{
height: calc(50vh - 44px - 49px);
}
When you are giving it a height percentage it knows that it should only take up 50% of its containers height. Remember, the container is the <ion-content>. The <ion-content> takes into account that there is a header and tabs by adding the has-header and has-tabs classes which modifies the top and bottom, respectively. (Note that Android, by default, will place the tabs at the top of the content and then add the has-tabs-top class). Therefore, when you use percentages the height will not exceed the <ion-content> container and you will be able to scroll to the bottom and see all of your list items.
I hope this didn’t confuse you more. Send me a message if I did and I’ll try to clear some of it up. 
2 Likes