hi there,
I create a google map in javascript using google map API, and it is weird: everytime i change the height to %, the map does not show up, but if i change to unit px, it shows up.
SyntaxEditor Code Snippet
#mapDiv { width: 100%; height: 80%; }
regards,
bb
Hey BB,
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are a few workarounds to this though.For instance you can set it to height: 100vh; This will create the element to be 100% of your window height.Or you can use px instead.
Hi Barong,
I haven't tried, but my friend Google told me this :)
https://stackoverflow.com/questions/32928684/google-maps-height-100-of-div-parent
In short, you should set the body height.
Cheers,
José
hi Jose,
I tried with this css, unfortunately the same result - nothing shown up. Is the CSS correct?
No matter what the value of the height - 80% or 100% or else, it doesn't shown up. However, if i change to px the height, it shows up. The width is okay whether it is % or px still show up.
Try to set also the containers between the body and the map container to 100%. That's what is in the answer.
Tell me if it worked or not.
José
I put css style in the container that includes the expression, but still nothing.
If you check in inspect of the browser, you can see that there are a few containers between the body and the main container:
I was suggesting, setting them all to "height: 100%". But, I'm not sure it will works...
hi Josh,
Even i cannot edit the Height property of the Main Content. How to do it?
Hey Clearing,
You are right if i change the height to units vh or px it will work out. However, i am still wondering how to workaround this in % - at least there is a way in Outsystems just in case it is a must.
In addition to Container widget, i also add another CSS rule to MainContent:
but still nothing.
BB, could you open the page up in your browser and press F12 (inspect source) and locate the map div?
Then try to look at each of the parents and confirm their size, there might be an element in between that does not have a height yet.
I suspect it might be the form element.
*Try setting body > form { height: 100%; }
Claring wrote:
hi Clearing,
I have inspected all ascendants, and they all have height 100%, but still does not work.
and for solution, it is okay.. i use the vh unit.
100% height is simply a tough nut to crack.
(in essence, the height is infinite because we are dealing with html-pages, that's why 100% is actually a silly thing)
what do you want, you have 100vh, you can also do some calculations with css like
calc(100vh - 400px)
you can also do some calculations with jquery upfront etc..
Set container style as below:
"height:100vh"
use 100vh or depend on what vertical height you required.