Hi,
I have a google map that I am putting into ion-content and height becomes 0 when I have height:100% or min-height:620px and min-height:100%, it would not grow over 620px… What would be causes?
J
Try using a trick I learned from jQuery Mobile.
While map is being visible set ion-content to:
position: absolute;
top: 0; // Use different number if you have a header
left:0;
right:0;
bottom: 0; // Use different number if you have a footer
the ion-content height is automatically calculated by ionic. and this height should be exactly the height of the viewport - other bars like header, subheader or footerbar.
In the ion-content is a scrolling-div with represents the real scrolling height of the content of the view.
please never change position and height attributes of the ioncontent.
I implemented a few google maps without such hacks.
The map can only has a height of the container around, because the map is scrollable it self, so it should be max as height and width as the ion-content around.
He needs to try everything, even these hacks.
What you say is correct but he can’t find a problem he needs to look outside the box.
but using a google map… is not a really big problem… like many people is using this inside their apps without those hacks…
and before somebody understands how the framework works… you can ran into deeper problems…
they are causing with such stuff… like “ehh my scroll behave is broken… or why das js scrolling not correctly working” and so on. 
1 Like
Though I do agree with you on this matter hybrid mobile development is all about these hacks.
I would bet you that 80-90% of developers found on this forum simply don’t have time to learn or dig deep enough until they can solve this kind of problems.
Maybe, but only maybe, if he try this hack he’ll find a real bug in his application. Let’s be honest this problem is not related to Google Maps (too old framework for this kind of an error) or Ionic.
Let him play, maybe he learn something.
hmm I think this problem is related to the infinite scroll as well.
once I loaded enough amount of item for list but infinite scroll think that I still need more item to be filled…
I think my height is not getting set correctly.
Is there a way to see the actual calculated XX px in console view or something?
plus, I started my project using https://github.com/EricSimons/ionic-course for startup of the project.
sorry but i can not get your real problem… i thought it is google maps related Oo … why is there now a infinite scroll and a list ^^…
maybe you should build a codepen.
oh sorry, I should’ve made as a separate list…
So map’s height is not calculated so height:100% is not working I assume based on what the replies are…
And, also on the other tab page that I have… Infinitescroll is happening right as I enter the tab page…
@bengtler Is there a way to see the current calculated height in px by Ionic in console? So I can verify my current height?
@bengtler Is there a way to see the current calculated height in px by Ionic in console? So I can verify my current height?
#map-canvas {
display: block;
min-width: 320px;
min-height: 480px; !important; /* test /
width:100%;
height:100%; !important; / test */
}
and Map is a directive that is placed in tab template html…
return {
’,
restrict: ‘A’,
template: ‘
replace: true,
link: link
};
also,
It was not related to using google map but if I use just div with color there but still not height as you see.
.test {
min-height: 100px;
height:100%;
width:100%;
background-color: red
}
I don’t know if using ion-tab is something that I have to enable automatic calculated height for each tab pages or something…? rather than a single page’s automatic height calculation?
if you are using chrome you can use developer-console --> click on the magnifier and hover over your body --> there your should see the current heights and widths or select the ion-content through the dom.
I just found out that it does not also work for simple div too. see the latest reply with picture that has ‘red box’
and here is the codepen that shows the problem.
find where class “test” style is getting being used.
It does not stretch to 100% height.
for your map do like i said --> set scroll to false and it is working:
2 Likes
I already have that in my actual code but somehow it does not apply that logic to it… hmm I wonder why.
strange, this works this way.
I hope somebody who know whats going on under the hood can explain this…
if I have code like below, it would not work (does not use 100% height)
> <ion-content scroll="false">
> <!-- custom google map directive -->
> <div app-map></div>
> </ion-content>
but if I use like this below, it works like charm
> <ion-content scroll="false">
> <div class="test">
> <!-- custom google map directive -->
> <div app-map></div>
> </div>
> </ion-content>
and css for ‘test’ is,
.test {
min-height: 480px;
height:100%;
width:100%;
background-color: red
}
hm strange i changed your example with the red box a little bit and added a map directly to the ion-content.
.scroll{
height: 100%;
}
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
This has worked for me a couple of times, and it sparked when you said that wrapping the map in a .test worked. That is (I believe) because the map needs its container to have a set height, be it a div (.test) or the ion-content (then it would be .scroll).
Could you give this a try?
1 Like
for me, I should’ve had div to have right height which is between map directive and ion-content or not have div and just use map directly. I had div for controller binding but I am doing that in $stateProvider for that tab page now so it worked out for me. I really appreciate for the helps. thanks