I'm using this link to include Google Maps in my Ionic app.
It works fine, but I would like it to fill the entire height that is still available beneath the header.
I'm only able to give it a height in px, like so:
.angular-google-map-container { height: 200px;}
The moment I change it to %, it doesn't show the map anymore.
Anyone who can help me with this?
Everytime you are using a percentage you have to ask yourself "Percentage of what?"... Since you didn't provide the whole code it is impossible to answer you perfectly.
By using .angular-google-map-container { height: 200px;} you are forcing all parents container to increase their size to fit the 200px height. That's why it works.
A dumb fix would be using view port height value. Something like :
height: 80vh;
Which is 80% of the view port height.
I managed to make it work using:
.angular-google-map-container {
position: absolute;
top: 20px;
bottom: 0;
right: 0;
left: 0;
}
Related
I have a game-level map image like this and I code by manual HTML - CSS - JS. I want to attach
the level number based on the coordinates of the image but it moves to another position for another screen. I have used relative position for the parent element and absolute position for child elements. (I tried using px, em, rem, in, cm unit, but it hasn't worked well)
I just want an idea for this problem. Thank you!
I think there are several ways to solve that problem.
You mentioned like (I tried using px, em, rem, in, cm unit, but it hasn't worked well), it's true you failed because you tried with fixed amount.
In order to make sure the child image is fixed on the certain place of parent image, you should use dynamic amount like following alternative solutions.
CSS
You can use percent in styling like.
.map {
position: absolute;
width: ###%;
height: ###%;
x: ###%;
y: ###%;
}
You can use javascript.
When loads the initial screen, you can calculate the ratio of the parent width to screen's width. And you can apply it to the styling using CSS selector or ID.
Update the design.
I think it's the proper and best solution. So you can update the design with map and markers together.
Hope it works for you!
I'm not sure if I get it right. You are trying to position the numbers relative to the whole background image? What are the other screen you refer? Can you show an actual screenshot of the issue?
I would do:
<div class="image">
<span id="span-1">1</span>
<span id="span-2">2</span>
</div>
and then use PERCENTAGES to the determine the position of the numbers:
.image {
position: relative;
background: red;
width: 100px;
height: 100px;
}
span {
position: absolute;
}
#span-1 {
left: 55%;
}
#span-2{
left: 20%;
top: 75%;
}
Sandbox
Trying to add Google Maps to a new web page on an existing Laravel project, which is proving to be a huge pain in the backside.
https://www.beenleighrum.com.au/findme
The code is solid as it works on multiple other websites.
The issue is that by default, the element has a position of relative:
style="position: relative;overflow: hidden;"
If I open DevTools (F12) and change the position to Static then the map shows up. Problem is that the google maps API wants it to be relative and unless I can change it, I don't see how my map is going to display properly?
You need to set width & height to your map container.
#map {
width: 100%;
height: 100%
}
Set you width and height to your map:
#map {
width: 100vw;
height: 100vh;
}
which means 100% viewport width and 100% viewport height. With vw and vh you don't have to deal with the container of your #map.
My leaflet canvas currently looks like the following, with a 700px height:
However I would like its height it be 100%, in order to take the whole white space.
height:100% doesn't work in the CSS properties of the map canvas.
I found a few solutions but they are only good for Google Maps.
Does anybody has a solution, even if it's only a workaround ?
Thanks !
The best way is to use the CSS length units vh and vw. These allow a block-level HTML element to have a dimension relative to the viewport size, instead of the size of its parent element (as % does).
e.g.:
#map {
width: 100vw;
height: 100vh;
}
For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/length
Using height: 100% does work, it only needs the parent containers to have a size too (working demo):
html, body {
height: 100%;
}
#map {
width: 100%;
height: 100%;
}
Just as an alternative approach: If you have a fixed height nav bar at the top, say 50px, and fixed width on the left, say 100px, then you can make the map take up the rest of the space like this:
#map {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 100px;
}
I'm going to have trouble explaining what I mean but bear with me. First here's my fiddle https://jsfiddle.net/jmajnqej/5/ (updated by Aziz)
#freelancewrapper {
width: 100%;
max-width: 1000px;
height: 440px;
background-color: #9D9D9D;
position: absolute;
}
I'm trying to get freelancewrapper to hug the right side of the screen with no padding. It needs to stay connected to the very right side of the screen no matter what width the window is. To make it more complicated it's parent div contentwrapper has to stay where it is with the same width and margins.
here is a representation of two screen sizes to show what I mean. http://imgur.com/a/IkOwx
Update: I didn't realize it at the time but this is a two part question. Positioning it was easy but getting the right correct width property is not. Here's my question for that Trouble defining width of a responsive div.
All you have to do is add the following CSS properties to your element:
position: absolute;
right:0;
jsFiddle fork
If you want the div to remain attached to the screen when scrolling, you can replace absolute with fixed.
Keep in mind that position: absolute works relative to the first parent tag with a position:relative. by default, that tag would be the body.
Also an important thing to keep in mind is that when an element is absolutely positioned, it will lose its space in the layout and hover over all elements.
I can't tell you the exact value you should need to achieve the desired result. What i would advice for trying to make your styling "responsive" is to start 1. from a mobile first approach(easier to up the screen size then downsizing).
To further answer your question try using relative units. your width for example is 100% this is relative. But instead of pixels try using em.
every ~16 px(not precise) is 1.0 em.
furthermore you can use position: absolute;
good luck further.
Like Paulie_D said you can use position
CSS
.contentwrapper {
width: calc(100% - 190px);
max-width: 1160px;
margin-top: 50px;
margin-left: 40px;
position: absolute;
right:0;
}
DEMO HERE
you can use negative right margin on <div class='contentwrapper'>
.contentwrapper{
margin-right: -48px;
}
https://jsfiddle.net/linkers/jmajnqej/3/
I would like to extend my div element to whole page but I dont want to set te scrollbars for page. I tired $(window).width and $(document).width but when i set this to my css the scrollbars appears. I cant add CSS width: 100% becouse other stuff in my application base on width in pixels not percents so it cant be done like this. Can anyone help me?
Create a #mydiv that contains everything and then :
#mydiv { position: absolute; bottom: 0; left: 0; top: 0; right: 0; overflow: hidden}
Should make it.
OK I fugred it out.
I set in CSS width: 100; height:100% and then by JS I get dimensions in pixels by $('#element').width()