css - height % does not work

css - height % does not work

  

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

 

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.

regards,

bb

Hi Barong,

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.

Cheers,

José

hi Jose, 

I put css style in the container that includes the expression, but still nothing.

regards,

bb

Hi Barong,

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...

Cheers,

José

hi Josh, 

Even i cannot edit the Height property of the Main Content. How to do it?

regards,

bb

Solution

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.

Solution

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.


regards,

bb

In addition to Container widget, i also add another CSS rule to MainContent:

but still nothing.


regards,

bb

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%; }

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..


Claring wrote:

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%; }

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.


regards,

bb


Set container style as below:

"height:100vh"


use 100vh or depend on what vertical height you required.