I'm trying to put a Google Map inside a Bootstrap content-tab (this). This is my code for the map:
<style>
#map_canvas {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, mapOptions);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
this is where I place the map_canvas div:
<div class="tab-content">
...other divs here...
<div class='tab-pane fade' id='contact'>
<div class="row">
<div id="send_email" class='span4 pull-right'>
...blablabla a form here...
</div>
<div id="information" class='span8'>
<ul>...contact info...</ul>
<div id="map_canvas"></div>
</div>
</div>
</div>
This is the code for the divs:
$('#navtabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
Really, nothing special about it. Yet for some reason the map is off to the side, and looks like this:
If I try and move it it just auto-fixes itself to be half-outside like in the picture. ommiting bootstrap.css solves the problem. Putting #map_canvas outside the content-tabs also solves the problem. Yet I can't tell exactly what's screwing it up.
It isn't related to the max-width issue as suggested here, since I'm using bootstrap is 2.3.2 which addresses it and includes these lines by default (adding them to my own css doesn't help either):
#map_canvas img,
.google-maps img {
max-width: none !important;
}
I tried playing with chrome developer tools and scanning the divs and its parents, I went over the .tab-content inside bootstrap css, I tried ommiting the entirety of the img attributes inside the bootstrap.css, I tried many other solutions from SO, to no avail.
Any help would be much appreciated.
I had a hacky solution for this issue when this was happening to my map in a bootstrap modal.
When the the tab (or modal in my case) content has finished loading call:
google.maps.event.trigger(MAP_OBJECT, "resize");
And optionally:
MAP_OBJECT.setCenter(center);
Admittedly, the map for a brief moment looks the way it does in your screen shot and then looks normal.
Sorry I don't have a definitive fix for you!
I had the same problem. Joseph's solution will work if you'll bind to the shown event instead of click.
#freakycue was right. I needed to do Joseph's answer but bind it to the shown event.
This is what ended up working for me:
$("#navtabs a").on("shown", function(e) {
google.maps.event.trigger(MAP_OBJECT, "resize");
});
Related
I've got some code in AngularJS here working half percent (I will explain) :
<button ng-class="{'svgMinus-dark': isDarkTheme, 'svgMinus': !isDarkTheme}"></button>
I also tried another writing to say the same :
<button ng-class="{'svgMinus-dark': true-condition, 'svgMinus': !isDarkTheme}" href=""></button>
And I got exactly the same result (and problem). My problem is, when I do set isDarkTheme to true (working), the class doesn't edit instantly. I have to click on my button. And I don't know why, when the $scope edits itself, the class doesn't toggle instantly.
Why do I have to click to see the class of my true-condition (or false condition) update ?... Is there a way to force my ng-class update when my $scope.isDarkTheme toggle to true or false ?
thanks a lot in advance, I'm getting less and less hair haha
Here is a working example. It might not help you, but you can use it (copy it) to edit your question and create a snippet to demonstrate your code.
angular.module('myApp', [])
.controller('myCtrl', ['$scope', '$timeout', function($scope, $timeout) {
$scope.isDarkTheme = false;
$scope.toggleDarkMode = function() {
$scope.isDarkTheme = !$scope.isDarkTheme
};
$timeout($scope.toggleDarkMode, 2000)
}]);
div {
padding: 20px;
height: 100%;
}
.is-dark {
background: #111;
}
.is-dark h1 {
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" ng-class="{'is-dark': isDarkTheme}">
<h1>Toggle in 2 seconds</h1>
<button ng-click="toggleDarkMode()">Toggle dark mode</button>
</div>
I'm using the bootstrap-vue overlay on a page that has long content scrolled via the browser window.
<b-overlay :show="loading">
The overlay correctly covers all of the content, even the part below the viewport, but the overlay's built-in spinner is centered on the content rather than the viewport, so the spinner ends up near or below the bottom of the viewport when the content is long enough.
I've tried custom content via a slot, like this...
<b-overlay :show="loading">
<template v-slot:overlay>
<div style="???" class="text-center">
<p style="???">Make me a spinner and center me on the viewport</p>
<b-button
</div>
</template>
...with dozens of ideas for style="???", including position:absolute with different tops, including top=50vh, including !important strewn around, etc., but the content doesn't budge.
// Note that this snippet doesn't run, because I don't see a way to get
// bootstrap-vue via CDN
var app = new Vue({
el: '#app',
data: function() {
return {
message: 'Hello Vue!',
messages: []
}
},
mounted() {
for (let i=0; i<50; i++)
this.messages.push(i)
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<b-overlay :show="true">
{{ message }}
<!-- long content below extends the overlay size -->
<!-- this moves the spinner down and off the viewport -->
<ul>
<li v-for="m in messages" :key="m">{{m}}</li>
</ul>
</b-overlay>
</div>
I think key to solving this is finding the CSS selector that allows me to change the spinner's position to "fixed" as opposed to "absolute" which seems to be what bootstrap generates.
To get spinner on center of screen you need to make it as direct child of body.
If it is nested it will have restrict area inside immediate parents area.
Try to add that separately or once your DOM ready detach overlay and append to body tag.
I ran into the same issue. Adding this line of CSS on the component resolved it for me:
<style>
.position-absolute {
position: fixed !important;
}
</style>
Note: make sure to not include the scoped keyword in your <style> tag, as this will not work for Bootstrap classes.
I have a Blogger page with an embedded Google map which works fine. When I try to use Google's Javascript API to add a KML layer on top of the map the map becomes entirely black apart from the navigation controls. If I set the kml layer back to null the underlying map appears again.
I have tested the exact same code in a local environment and it works fine. So the issue is with embedding the code within a Blogger page.
Below is my html and js. Does anyone have any idea what the issue might be?
Note that the example kml file I'm using below is just a skeleton without any placemarkers, but I've tried it with other kmls and got the same result.
<html>
<head>
<style type="text/css">
#map-canvas {
height: 480px;
width: 500px;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3" type="text/javascript"/>
<script type="text/javascript">
function initializeMap() {
var centre = new google.maps.LatLng(35.5906421,37.6945915);
var mapOptions = {
zoom: 3,
center: centre,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var layer = new google.maps.KmlLayer({
url: 'http://trackmytour.com/Dpxc9.kml',
preserveViewport: true
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initializeMap);
</script>
</head>
<body>
<p>
Here is where I'll be tracking my progress.<br>
<br>
<br>
</p>
<div id="map-canvas"/>
</body>
</html>
I have a problem while working with Bootstrap 3 and gmaps 2..The problem is that my map controls are not displayed properly as shown in the image bellow..
Bellow is my code as well :
<script type="text/javascript">
function initialize(){
if (GBrowserIsCompatible())
{
map=new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.084142,25.151997), 11);
map.setUIToDefault();
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
Any ideas..?
I too once crossed this problem, this is conflict occurred with your CSS with gmaps. You might have a global CSS like
img {
max-width:100% // or something
}
By inspecting(using browser's dev tools) you can find where it is being overridden and try to make use of either id or class selectors and change it to none.
I have tested it here
#map_canvas img {
max-width: none;
}
I'm working on asp.net application.And i'm looking for a way to show a link over a textarea when a user try to add a comment if the user is not loggd in.
I've got this idea from Youtube videos comments.If ur not coonected,they show a link saying u have to login to be able to add a comment.
Does anyone has an idea how to do that.a piece of jquery code will be helpful.
Thanks in advance.
Best Regards,
Rachid
You could do it with an overlay link that you placed over the textarea on mouseenter. Then it would just be a matter of hiding it on mouseleave:
HTML
<div id="comment">
<textarea rows="3" cols="20"></textarea>
<a class="overlay" href="" style="display: none; position: absolute;">You must login</a>
</div>
jQuery
$('#comment').mouseenter(function() {
var textarea = $(this).find('textarea');
var overlay = $(this).find('.overlay');
var pos = textarea.position();
overlay.css({
top: pos.top,
left: pos.left,
width: textarea.width(),
height: textarea.height(),
display: 'block'
});
});
$('#comment').mouseleave(function() {
var overlay = $(this).find('.overlay');
overlay.css({
display: 'none'
});
});
You can see it in action here.