I'm using Boostrap 4 and Leaflet
On Leaflet,
I can open modal by clicking on the markers bindPopup.
In Leaflet's Fullscreen
the modal in opened well too,
but behind the map.
It is possible to stay in fullscreen and open the modal over the map ?
I've tried
- to remove classname leaflet-fullscreen-on
$('#map').removeClass('leaflet-fullscreen-on');
to change z-index of modal
$('#modal').css('z-index',100000);
Without success
Is anyone know ?
Ps:
Sorry for my english, I'm french (confined) ;-)
Using Bootstrap 3 and Leaflet.fullscreen https://github.com/Leaflet/Leaflet.fullscreen I do this by calling the modal inside the map div:
<div id = "map" class = "map">
<? php include ("include / modal / mymodal.php"); ?>
</div>
The result:
• In full screen mode, the modal appears on the map,
• when disabling full screen mode, the access to the modal is blocked due to the backdrop screen, this can be annoying if the modal contains a form, links, etc. To remove the backdrop screen, you must add an argument data-backdrop="false" in the modal and add a close button to the modal:
<div id="modal" class="modal fade" data-backdrop="false">
Demo : https://www.gpstraces.net/how-to-open-a-bootstrap-modal-in-a-leaflet-full-screen-map-tutorial-1
Voili voilou
Related
I am using tabs to display clear content, but one of them stopped downloading well since it is in the data-toggle tab. It is a Leaflet map.
Here is the code :
Navbar code :
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Données principales</a></li>
<li><a data-toggle="tab" href="#carte">Carte</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">Lorem ipsum</div>
<div id="carte" class="tab-pane fade"> **//see script below\\** </div>
</div>
Script :
<div id="carteBenef"></div>
<script type="text/javascript">
$(document).ready(function () {
var map = new L.Map('carteBenef');
var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
subDomains = ['otile1', 'otile2', 'otile3', 'otile4'],
cloudmadeAttrib = 'Data, imagery and map information provided by MapQuest, OpenStreetMap and contributors, CC-BY-SA';
var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains});
var iades = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>)
map.addLayer(cloudmade).setView(iades, 15);
var benefLocation = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>);
var benef = new L.Marker(benefLocation);
map.addLayer(benef);
benef.bindPopup("<?php echo htmlspecialchars($beneficiaire->nom) . ' ' . htmlspecialchars($beneficiaire->prenom); ?>").openPopup();
});
</script>
The map was appearing well before I put it in the tab, does someone have an idea why it does not work now? Thank you =)
Welcome to SO!
If your Leaflet map suddenly works correctly after you resize your browser window, then you experience the classic "map container size not valid at map initialization": in order to work correctly, Leaflet reads the map container size when you initialize the map (L.map("mapContainerId")).
If your application hides that container (typically through CSS display: none;, or some framework tab / modal / whatever…) or later changes its dimensions, Leaflet will not be aware of the new size. Hence it will not render correctly. Typically, it downloads tiles only for the fraction of the container it thinks is shown. This can be a single tile in the top left corner in the case of a container that was entirely hidden at map initialization time.
This mistake often arises when embedding the map container in a "tab" or "modal" panel, possibly using popular frameworks (Bootstrap, Angular, Ionic, etc.).
Leaflet listens to browser window resize event, and reads again the container size when it happens. This explains why the map suddenly works on window resizing.
You can also manually trigger this update by calling map.invalidateSize() when the tab panel is displayed (e.g. add a listener on the tab button click), at least the first time the container is rendered with its correct dimensions.
As for implementing the tab button click listener, perform a new search on SO on that topic: you should have plenty resources available for that matter, for most of the popular frameworks.
First, thank you #ghybs for your good explanation on why the Leaflet maps are not shown properly in these cases.
For those who tried unsuccessfully the #ghybs's answer, you should try to resize your browser instead of calling a method of the map object :
window.dispatchEvent(new Event('resize'));
As #MarsAndBack said, this fix may cause issues on pan/animation/etc features that Leaflet's invalidateSize provides.
I have this problem because i used modal bootstarp. and it not solved anyway. i tried map.invalidateSize() and window.dispatchEvent(new Event('resize')); but not fixed.
finaly it fixed by this:
$('#map-modal').on('shown.bs.modal', function(event) {});
'shown.bs.modal' event means when modal is completely load and not any confuse on size, now inside that write your codes.
For those like me weren't able to solve the challenge with the precious #ghybs explanation (map.invalidateSize()) and were able to do it with #gangai-johann one, there's still a chance you may do it the right way. Put your invalidate instruction inside a setTimeout, as it may be too early to dispatch that instruction.
setTimeout(() => {
this.$refs.mymap.mapObject.invalidateSize()
}, 100)
Refer to https://stackoverflow.com/a/56364130/4537054 answer for detailed instructions.
I have a modal window (using bootstrap), with a close button. The modal window opens and closes fine in most browsers. However, in internet explorer, there is a problem. We can open the modal window fine, and close it fine ... but if we try to open it again, it wont.
Most of the javascript functionality is in bootstrap. Below is the html for the open button [I believe data-toggle="modal" and data-target="#exampleModal" are the key to opening the window]...
Get The Demo
...and the html for the start of the modal window, with the close button [note the id="exampleModal" tells which window to open. And the data-dismiss tells to close "modal"...
<div class="modal fade show" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="padding-right: 17px; display: block;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- CLOSE BUTTON -->
<div class="row at-modal-close-box">
<a href="#" data-dismiss="modal" aria-label="Close">
<img src="https://www.amazingdg.com/_dev/temp/images/modal-close-btn.svg" alt="Close Demo Form">
</a>
</div>
...
You can view the page here:
https://www.amazingdg.com/_dev/temp/
Note: When I click the open button a second time, there is an error in IE's console ... Object.keys: argument is not an Object. Note: this error doesn't occur the first time opening the modal window. Not sure how to fix it...
---------------------------------------------------
I tried to remove the fade class ... that made the modal window show ALL of the hidden elements in the form (required fields, successfully sent message, etc.)
if ($.browser.msie) {
$("#exampleModal").removeClass("fade");
}
---------------------------------------------------
I tried to change the fade transition (not supported by IE) using an IE media query. This removed the fade, but didn't fix the issue.
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */
.fade {
transition:none !important;
}
}
I had a similar issue on IE, and it was solved by doing the following:
Whenever you open the modal, using:
modal.element.modal();
Send in an empty object, like this:
modal.element.modal({});
This fixed the issue for me in IE (without the need to mess with the fade classes) and didn't change the behavior in other browsers!
Remove fade class which does not work in IE
if ($.browser.msie) {
$("#exampleModal").removeClass("fade");
}
I was facing the same issue that got a very simple fix.
You can simply toggle the modal using jQuery in the function that you call:
$("classnameORidName'").modal("show");
When navigating from one page to another, Ionic automatically display back button at the navigation bar. However, there are certain case where ionic don't display the back button. For example, when you navigate from a tab page to a none tab page.
How can I force Ionic to display back button on certain page?
Javascript:
.state('app.tab.playlists', { //<!-- Tab content page
url: '/playlists',
views: {
'tab-Content': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.singer', { //<!-- Not tab content page (if you navigate from tab page to this page, back button will not displayed)
url: '/singer',
views: {
'menuContent': {
templateUrl: 'templates/singer.html'
}
}
})
You can tell it in your controller. Try:
.controller('yourCtrl', function($scope) {
$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
viewData.enableBack = true;
});
})
But like LeftyX said. The history function for tab to non tab view is buggy.
Ionic manages a history while you're navigating from one view to the other.
$ionicHistory keeps track of views as the user navigates through an
app. Similar to the way a browser behaves, an Ionic app is able to
keep track of the previous view, the current view, and the forward
view (if there is one). However, a typical web browser only keeps
track of one history stack in a linear fashion.
Unlike a traditional browser environment, apps and webapps have
parallel independent histories, such as with tabs. Should a user
navigate few pages deep on one tab, and then switch to a new tab and
back, the back button relates not to the previous tab, but to the
previous pages visited within that tab.
There's a bug open on github which hasn't been fixed yet (and will only be fixed in 2.0) where Adam Bradley states:
The back button does not display because when you go into a tab, it
enter's it own "history", meaning each tab has its own navigation back
and forward.
So, basically, when you move from tabs to regular view you're going to lose the back button.
What you can do is to create one yourself:
<ion-nav-buttons side="left">
<button class="button back-button buttons button-clear header-item" ng-click="goBack()">
<i class="icon ion-ios-arrow-back"> Back</i>
</button>
</ion-nav-buttons>
and place it inside your view:
<ion-view view-title="home">
<ion-nav-buttons side="left">
<button class="button back-button buttons button-clear header-item" ng-click="goBack()">
<i class="icon ion-ios-arrow-back"> Back</i>
</button>
</ion-nav-buttons>
<ion-content padding='true' scroll='false' has-footer='false'>
<div class="card">
<div class="item item-text-wrap">
HOME PAGE
</div>
</div>
</ion-content>
</ion-view>
As you can see I've used ng-click="goBack()" for the button.
In your controller you simply would:
$scope.goBack = function(){
$ionicHistory.goBack();
}
don't forget to inject $ionicHistory in your controller.
PS: This is a over-simplified solution as it does not check if the history has got a backview:
$ionicHistory.viewHistory().backView
Add follwing lines inside your
<ion-navbar hideBackButton="true">
<button (click)="back()" class="back-button disable-hover bar-button bar-button-ios back-button-ios bar-button-default bar-button-default-ios show-back-button" ion-button="bar-button" ng-reflect-klass="back-button" ng-reflect-ng-class="back-button-ios" style=""><span class="button-inner"><ion-icon class="back-button-icon icon icon-ios back-button-icon-ios ion-ios-arrow-back" role="img" ng-reflect-klass="back-button-icon" ng-reflect-ng-class="back-button-icon-ios" aria-label="arrow back" ng-reflect-name="ios-arrow-back"></ion-icon><span class="back-button-text back-button-text-ios" ng-reflect-klass="back-button-text" ng-reflect-ng-class="back-button-text-ios">Back</span></span><div class="button-effect"></div></button>
Im having a hard time understanding how Ionic handles ion-nav-view vs. ion-view. I'm trying to build an app where the views are not nested (as example apps). This is what I've done
In index.html I have an ion-nav-view
I have 3 pages. 1 login, 1 list, and 1 item (item is a list item beeing clicked)
My list page is an ion-side-menus while the other 2 are ion-view's
Now to my question
When I click an item in my list I get a transition to my item page but when I go back to my list there is no page transition. This is the HTML
<ion-header-bar class="bar-dark">
<div class="buttons">
<button nav-transition="slide-left-right" class="button button-icon button-clear ion-android-arrow-back" ui-sref="list">
</div>
<h1 class="title">Item</h1>
</ion-header-bar>
How can I get transitions to work even though each page is its own ion-view?
EDIT
I solved the "transition back" using nav-direction="back"
Next problem is that transition only works ones from the list?
If i click the above the slide left transition occurs, but if I go back and press it again I don't get a transition? Is it some sort of cache?
The way I do is to have ion-side-menus inside index.html as the only directive, and inside it and with an ion-nav-view inside.
Then define an ion-side-menu with side="left" and include the list you want to show.
That way you can define a side-menu that will show throughout the whole app and be available with all the content you need.
Now to answer your question, I think the list page (in your case the one with ion-side-menus) does not have transition when going back because it is now an ion-view. The page transitions occur on ion-views when they are swapped in-out inside the . But the ion-side-menus page is not swapped in-out it's just there.
Regarding this:
EDIT I solved the "transition back" using nav-direction="back"
It worked because you explicitly told ionic that you want a nav-transition when going back.
Hope this helps a bit
I have a view in which I have the following code:
<div id="DivPassword" >
<%Html.RenderPartial("PasswordDetails"); %>
I want to display the div as a dialog, in which I am successful. When I click on a link the dialog opens.
However, I can see that the partial view is also being displayed in the View, when the page loads. Why is it so? How can I correct that?
It displays because your code generates markup like:
<div id="DivPassword" ><!-- contents of partial view here --></div>
When a browser sees this markup, id displays stuff. :)
In order to not display the dialog until you run some JavaScript to make it display, you need to hide it. You can do this with a CSS rule:
div#DivPassword
{
visibility: hidden;
}
Pretty much all JS dialog libraries will change the visibility when you pop up the dialog.