I have a full screen Google Maps Div, and I added an Input to be used as a searchbox. This is the code:
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
position: fixed;
}
.container, .container > div, .container > div #map {
height: inherit;
}
.mapcanvas {
display: block;
position:absolute;
height:100%;
bottom:0;
top:0;
left:0;
right:0;
margin-top:0px; /* adjust top margin to your header height */
}
</style>
<body onload="initializeMap()">
<div id="map" class="mapcanvas"></div>
<input class="form-control" placeholder="Insert the place you are looking for" type="text" id="input_location">
</div>
</body>
<script>
function initializeMap() {
map = new google.maps.Map(document.getElementById("map"),
{
tilt:0
,center:new google.maps.LatLng(41.946, 13.499)
,zoom:7
,mapTypeId: google.maps.MapTypeId.SATELLITE
,mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
}
}
);
const input = document.getElementById("input_location");
const searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);
}
</script>
When I open this page on the smartphone, the searchBox is very, very small.
How can I control the size of this? I tried with Bootstrap classes class="form-control form-control-lg" and with style="font-size:36px" but nothing happens.
Any ideas?
This is the problem with the responsiveness of your webpage. A mobile browser is rendering your website as a desktop website.
To eliminate this problem simply insert
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the <head>...</head> of your homepage.
Output
There is also a suggestion for you. If your page looks like what you have shared above then make some changes to it.
Put the <script>...</script> inside the <body>...</body>and don't forget to include <html>, <head> etc to your webpage.
The problem was not directly related to Google maps API.
It was related to a web forward that uses an iframe tag.
This causes the mobile browser to render the desktop version of the page.
Related
I have this website - https://www.emeraldhill.rs/
On the home page, there is this part - https://prnt.sc/qp2ri0
If you click on any of these images it will take you to the page "Reference". Right after the page is loaded, depending on the position of the building you selected on the home page, it will start scrolling until it finds the right block. I set the anchor links.
What I want is to avoid the scrolling part and land on the block that I choose on the home page instantly.
How can I achieve this?
The website is built with Divi theme.
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_scrollintoview
<html>
<head>
<style>
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
background: green;
}
#content {
margin:500px;
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
</head>
<body>
<button onclick="myFunction()">Scroll</button>
<div id="myDIV">
<div id="content">
Some text inside an element.
</div>
</div>
<script>
function myFunction() {
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
}
</script>
</body>
</html>
This is what you exactly need,and the referance link is provided above.
I gave you what you want in javascript.
I am not good in wordpress but i think you can edit divi theme.
I am working on a popup window using ngDialog. Here is some code:
<style>
.ngdialog.dialogforpopup .ngdialog-content
{
width : 1100px;
margin-top:-100px;
padding-top:10px;
}
</style>
Template
<div style="height:800px;width:1040px;padding-left:5px;padding-top:5px;
padding-right:5px"
</div>
<div class="ngdialog-buttons" style="margin-top:10px">
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="cancel()">Cancel</button>
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="save()">Save</button>
</div>
Directive
ngDialog.open({
template: 'editor.html',
controller: 'editorController',
className: 'ngdialog-theme-default dialogforpopup',
closeByDocument: false,
disableAnimation: true
});
I have two questions.
How can center my popup on the screen? Currently I am using margin-top:-100px;
Is it possible to size ngDialog automatically to its content?
Thanks
One can center ngdialog by setting "table-like" styles:
.ngdialog{
padding:0 !important;
}
.ngdialog-content {
padding: 0 !important;
background: transparent !important;
display: table; /*table-like styles for vertical centering*/
width: 100% !important;
height:100%;
}
.ngdialog-holder {
display: table-cell;
vertical-align: middle;
width: 100%;
height:100%;
}
.ngdialog-content > .ngdialog-close{
display:none; /*hide original close button*/
}
.my-dialog{
width:400px;
background:#fff;
border:1px solid #000;
margin:0 auto; /*center dialog horizontally*/
position: relative;
}
Also one need to wrap content of dialog with ".ngdialog-holder" and ".my-dialog" blocks. And finally place ".ngdialog-close" button inside of it.
<div class="ngdialog-holder">
<div class="my-dialog">
Dialog content goes here
<div class="ngdialog-close"></div>
</div>
</div>
Here is live example: ngdialog plunk
I downloaded ngDialog package using bower. so ngDilaog related CSS and JS files are in bower_components.
I added the following CSS and JS files to my html page.
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog.css">
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog-theme-default.css">
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog-theme-plain.css">
<script src="../bower_components/ng-dialog/js/ngDialog.js"></script>
In my own JS file I am opening the dialog in the following way:
ngDialog.open({ template : 'dialog' ,scope : $scope , className: 'ngdialog-theme-default', plain: false,
showClose: true,
closeByDocument: true,
closeByEscape: true,
appendTo: false});
here is the html code:
<script type="text/ng-template" id='dialog'>
<div class="ngdialog-message">
Hello!!
</div>
</script>
With the above changes I am able to show the pop up on the center of the screen.
can use of the following class for pop up.
className: 'ngdialog-theme-plain'
className: 'ngdialog-theme-default'
I hope this will help!
So my problem is that I have set my view to be width & height 100%; which works well but once some of the content within the view causes a scrollbar to appear it scrolls into whitespace. As if the view's overflow is hidden but the content is still making the page scroll.
I was unable to make a fiddle since I required multiple html files to load and render views so Ill post some code and images about the issue and hopefully someone can catch the problem. I suspect it is most likely a CSS issue with my positioning system but I have been unable to resolve it.
::HTML::
!!!this is the Index page
<!DOCTYPE html>
<html ng-app="appMain">
<head>
<title>MY APP</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
<!-- CSS imports -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- JS imports -->
<!-- Angular JS Primary Scripts -->
<script src="scripts/angular.js"></script>
<script src="scripts/angular-ui-router.js"></script>
<!-- Angular JS subScripts for controllers etc. -->
<script src="main.js" ></script>
</head>
<body>
<div class="makeBackground" ui-view></div>
</body>
</html>
!!!!this is the sign-in.html page:
<div class="loginBackground makeBackground"></div>
<div class="transparentContainer">
</div>
::JS - Module::
(function() {
var appMain = angular.module('appMain', ['ui.router']);
swiftMain.config(function($stateProvider, $urlRouterProvider) {
// if url not defined redirect to login
$urlRouterProvider.when('', "/sign-in");
// if nonexistant url defined redirect to sign-in
$urlRouterProvider.otherwise("/sign-in");
// Now set up the states
$stateProvider
.state('sign-in', {
url: "/sign-in",
templateUrl: "templates/views/sign-in.html"
});
});
}());
::CSS::
.makeBackground {
position: relative; top: 0;
width: 100%; height: 100%;
}
.geminiBlue {
background-color: #074d77;
}
/* fancy 'e' bg on login background and courselist */
.loginBackground {
background-image: url(../images/login_back.png), url(../images/geminiBlue.png);
background-position: center top, left top;
background-repeat: no-repeat, repeat;
}
.transparentContainer {
border-radius: 20px;
background-color: rgba( 255,255,255,0.4 );
width: 500px;
height: 600px;
position:absolute;
z-index:15;
top:50%;
left:50%;
margin:-300px 0 0 -250px;
}
the CSS above shows that the transparentContainer class has a fixed width and height that will create a scroll at lower resolutions; but the view allows the scroll and hides the content as can be seen below here:
How to get the view to expand with the content within it?
position: absolute; is your friend.
.makeBackground {
position: absolute;
top: 0;
width: 100%; height: 100%;
}
.geminiBlue {
background-color: #074d77;
}
/* fancy 'e' bg on login background and courselist */
.loginBackground {
background-image: url(http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png);
background-color:#00D;
background-position: center top, left top;
background-repeat: no-repeat, repeat;
}
.transparentContainer {
border-radius: 20px;
background-color: rgba( 255,255,255,0.4 );
width: 70%;
height: 70%;
position:absolute;
z-index:15;
margin: 15%; /*-300px 0 0 -250px;*/
}
<div class="makeBackgrounnd" >
<div class="loginBackground makeBackground">
<div class="transparentContainer"> </div>
</div>
</div>
Resolved:
The Issue was the css. by setting the top level containers overflow property to hidden and using margins instead of position: relative; with pixel adjusts my content now fits within the page.
I loaded Google Maps API v3 and print Google Map in div. But when set width & height to 100% and auto I can't see the Map.
Here is HTML code snippet.
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
Is there a way to fix this issue?
You have to set all parent containers to a 100% width if you want to cover the whole page with it. You have to set an absolute value at width and height for the #content div at the very least.
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}
Setting Map Container to position to relative do the trick. Here is HTML.
<body>
<!-- Map container -->
<div id="map_canvas"></div>
</body>
And Simple CSS.
<style>
html, body, #map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position: relative;
}
</style>
Tested on all browsers. Here is the Screenshot.
Very few people realize the power of css positioning. To set the map to occupy 100% height of it's parent container do following:
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
If you have any non absolutely positioned elements inside #map_canvas_container they will set the height of it and the map will take the exact available space.
If you can't affect your parents elements (like in a nested components situation) you can use height: 100vh which will make it a full window (=view) height;
This Work for me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#cont{
position: relative;
width: 300px;
height: 300px;
}
#map_canvas{
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=APIKEY"></script>
<script type="text/javascript">
function initialize() {
console.log("Initializing...");
var latlng = new google.maps.LatLng(LAT, LNG);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="cont">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>
You can set height to -webkit-fill-available
<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
Gmap writes inline style position to relative to the div. Overwrite that with :
google.maps.event.addListener(map, 'tilesloaded', function(){
document.getElementById('maps').style.position = 'static';
document.getElementById('maps').style.background = 'none';
});
Hope it helps.
Better late than never! I made mine a class:
.map
{
position:absolute;
top:64px;
width:1100px;
height:735px;
overflow:hidden;
border:1px solid rgb(211,211,211);
border-radius:3px;
}
and then
<div id="map" class="map"></div>
If that div is the only thing on your page, set:
body, html {
height: 100%;
width: 100%;
}
I struggled a lot to find the answer.
You don't really need to do anything with body size. All you need to remove the inline style from the map code:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A&output=embed"></iframe><br /><small>View Larger Map</small>
remove all the inline style and add class or ID and then style it the way you like.
This worked for me.
map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
I just added inline style .
<div id="map_canvas" style="width:750px;height:484px;"></div>
And it worked for me .
Had anyone got a problem with a:hover that has position: absolute and is above <img> under IE & Opera
a:hover has background, but <a> hasn't, both has display: block.
Thank you in advance for your help
...
To see the problem please check this webpage:
http://bckp.eu/test.html
or
use this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
div {
border: 1px solid black;
position: relative;
height: 200px;
width: 500px;
}
a.next {
right: 0;
}
a.prev {
left:0;
}
.withbackground {
background: yellow;
}
.nobackground {
background: transparent;
}
a.link {
position: absolute;
top: 0;
width: 100%;
height: 100%;
border:0;
}
a.link:hover, a.link:focus {
background: url(/img/comment.gif) repeat !important;
}
</style>
</head>
<body>
<div id="t">
<a class="link nobackground" href="#"><a> without background</a>
<img src="/img/DSC_00641.jpg" height="200" width="500" alt="Dummy img" />
</div>
<p>Doesnt work under IE? Add background | This is not quirks mode #</p>
<hr />
<div>
<a class="link withbackground" href="#"><a> with background</a>
<img src="/img/DSC_00641.jpg" height="200" width="500" alt="Dummy img" />
</div>
<div> <a class="link nobackground" href="#"><a> without background, without img</a> </div>
<script type="text/javascript">
function a() {
document.body.innerHTML+='<style>#t a {background: pink;}</style>';return false;
}
function quirks() {
alert(document.compatMode); return false;
}
</script>
</body>
</html>
This is one seriously wacky bug. Now, if you really must organize your html the way you have, then IE needs to have the following placed inside the a tag to get it to register with the image.
<div style="position: absolute; filter: alpha(opacity=0); background: red; top: 0px; left: 0px"></div>
But this would be better (have not tested completely across browsers). Organize the html like (no need for a wrapper div):
<a><img /></a>
Make sure the a is not position: absolute (IE7 didn't work with it so), and then set the image to:
img {position: absolute; z-index: -1}
I hope these head you in a direction to solving your problem.
Scott, thank you for your answer. This is just example of the problem.
Of course my real code is bigger than that:
- 2 tags to navigate prev/next (so I cant put <a><img></a>)
- both 's has but with display: none (<a><span>prev</span></a>). display: block doesnt help
z-index doesnt help. position: absolute works, when <a> has background.
I cant have filter: alpha(opacity=0) or opacity=0 because not every browser supports that.
I found odd solution that solves the problem, but dont want to use it: a {background: url(filedoesnotexists);} or i can use for example transparent 1x1 gif file but i would like to find reason of my problem.
Solution with img{position: absolute; z-index: -1;} div{position: relative;} a{position: static;} works exactly the same - no hovering without background above img for ie & opera
I also met another odd thing with that in my main code - will try to reproduce it. (EDIT below)
This is another strange problem - IE works, but only when it has another "layer" and mouse is hovering above this layer. Opera works fine in every case:
http://bckp.eu/test2.html - click Exif info and move mouse over image/new "layer"