Got a map V7 and a layer of pushpins as an entity collection.
Here is the crazy part:
When I pop an infobox without innerHtml set then it pops "over" the pushpins.
When I pop the infobox with my inner HTML is pops under the pushpin entity collection.
I have z-indexed my innerhtml as 100 etc to go higher than all,
It seems as if the pushpin entity layer is on a differnent level,
Any ideas?
(I have tried to set the infobox on other entity collection - and it did pop on top of the pushpins - but then the innerHtml did not respond)
I faced the same problem and solved it by:
setting the z-index to 4000
using absolute position
Here is my infobox html code:
<div id="infoboxText" style="z-index: 4000; position:absolute; font-size: 20px; background-color:White; min-height:50px;width:250px;"><div>
Related
EDIT
This question is not a duplicate of How to get a leaflet map canvas to have a 100% height? as for the obvious reason, that you can see my map spanning the 100% height (compare the attribution on my picture being in the gray zone, while the container of the other question obviously ends before the blank zone. Also i can identify the size of my container spanning the 100% of the parent container in the developer tools. Just take a look at my css and and a very close look at the picture and maybe at leaftlet if you don't know how it works.)
Original
I use leaflet 1.5.1 in ionic 3.
After panning the map a bit, oftentimes the contents for gray parts are not being loaded (no network requests/traffic indicated in my browsers dev tools) and i am left with gray parts/stripes in the map as in the picture (the gray horizontal stripe below).
When i pan a lot further the missing map parts are loaded, but sometimes not (especially in iOS).
My map page's HTML using my map component (below)
<map style="height: 100%; width: 100%;">
The map component's HTML
<div id='map'></div>
The component's scss file
map {
#map{
height:100%;
width: 100%;
}
}
And here the component's typescript which creates the map
this.map = L.map('map', {
center: L.LatLng(center.latitude, center.longitude),
zoom: 13,
attribution: Attribution,
tap: false
});
//Add OSM Layer
L.tileLayer("https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png", { attribution: Attribution }).addTo(this.map);
this.map.setView([center.latitude, center.longitude], 14);
Any hints on what i'm doing wrong?
The solution was to trigger a resizing event via window.dispatchEvent(new Event('resize')) every time the user enters the tab page holding all the tabs including the map tab.
The map is reacting to this by adjusting itself to the "new" size.
I’ve created a few components that handle form submission functionality. In each of these components, I want the form submit/cancel buttons to be fixed at the bottom of the view, much like the functionality available via ion-footer. The submit button needs reference to the variables + methods in the component for [disabled] + (tap) functionality, for example [disabled]="!formGroup.valid" (tap)="submitForm()"
If the component is a child of ion-content then there is no way to add ion-footer as it will be contained within ion-content, instead of below ion-content. At first glance, having ion-footer inside ion-content appears to view properly, but the rendering can be buggy especially in scroll situations. I went as far as setting a force-bottom css class with fixed position/bottom but it looks like the ionic javascript overrides fixed positioning when inside ion-content, so a pure CSS solution does not seem to be possible.
<ion-content>
<a-form-component>
</a-form-component>
</ion-content>
<ion-footer>
<!-- add a-form-component's button here -->
</ion-footer>
Any recommendations on how to achieve the desired functionality?
TIA
Let's say you have a page called page and a component called cp
inside page.html you have the component <cp></cp>
Inside cp.html you have
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div id="the-footer">
<button>login<button>
</div>
inside page.scss:
#the-footer{
background-color: #efefef;
text-align: center;
position: fixed;
width: 100%;
bottom: 0px;
z-index: 99999;
}
This will achieve the same result as ion-footer.
The div containing the button will always be visible regardless of the scrolling.
hope it helps
I have a map, which is displayed or hidden depending on a button click.
I init the map while it is hidden, add layer, add markers, and call fitBounds() for the markers.
My problem is that when the map is hidden, fitBounds doesn't work. After switching to visible, the map is shown but fully zoomed out. When I call fitBounds again, the map is shown correctly.
How do I know when the map is ready? I tried mapReady, but it is also called when the map is hidden.
Is there another way?
Thanks!
How do I know when the map is ready?
FWIW, it is indeed when the map.whenReady(callback) executes your callback.
Your issue is probably not about the map not being ready (as you figured out, the map is ready even when hidden), but in the fact that it is originally hidden, hence it (the map container) does not have its final size. It needs that size (height and width) as it impacts your map.fitBounds().
You probably just need to call map.invalidateSize() and re-perform your fitBounds once you show your map.
See also: Data-toggle tab does not download Leaflet map
You might easily create valid div with width & height. Also you need to setup it as absolute.
Then, add this div to relative one, which is displayed. That is all.
<div style="display: block; position: relative; overflow: hidden;">
<div style="display: absolute; width: 100px; height: 100px; left: -1000px; top: -1000px;" id="map"></div>
</div>
That might be enough
I have a sliding toggle div that is hidden on page load and when a button is clicked gets revealed. The div is 250px in height and is positioned top 0px. I have also tried bottom 100% which sort of does the same thing. I am using several layers of z-index and have had to position some divs using absolute in order to get the layout I wanted. But I was hoping there is a way to push all of these divs down by 250px when the sliding toggle is revealed. I was thinking that instead of using toggle div, maybe there is a way to scroll the page to -250px so that all the content appears the same but is pushed down?
This is the css for the div I am using in case there is something that can be done here:
#slidingTopBar
{
background:#199651;
display:inline-block;
position: fixed;
height:250px;
width:100%;
left:0px;
top:0px;
z-index:56;
}
The script for the toggle is being used as follows:
$(document).ready(function(){
$("#slidingTopBar").hide();
$(".show_hide").css('position','absolute').show();
$('.show_hide').click(function(){
$("#slidingTopBar").css('position','absolute').slideToggle();
}); });
And the toggle is being called using this html:
<div id="TopBar">SHOW</div>
Which is all working, except it is overlaying the content that is already there whereas I want it to push it all down.
Any help appreciated.
Using the clearfix method directly below the toggle div or it's wrapper should fix this:
HTML: <div class="clearfix"></div>
CSS: .clearfix { clear: both; }
Right now on my website I have the following JavaScript that shows and hides a
<div class="commentBox"></div>
when user clicks a
Show Comments
Full Code:
<script type="text/javascript">
function toggleSlideBox(x){if($('#'+x).is(":hidden")){$(".comentBox").slideUp(200);$('#'+x).slideDown(200)}else{$('#'+x).slideUp(200)}}
</script>
Show Comments
<div class="commentBox">Content</div>
The effect can be illustrated like this:
I wanted to modify this function to act differently, but I couldn't figure it out. Basically what I wanted was to show content that is at the bottom once it starts expanding and have a fade in effect.
This is what I was hoping to achieve:
Could anyone suggest how to achieve the slide / toggle effect that is shown in image 2? so when user clicks a link it expands like that and when link is clicked again it shrinks.
The effect you describe looks just like the JQuery UI slide effect to me (rather than the blind effect that you have at present). This doesn't provide the opacity animation but provides a very simple solution otherwise. Or maybe I am misunderstanding you?
(The method accepts a parameter to slide down, rather than right-to-left of course)
$("#test").show("slide", {direction: "up"}, 1000);
JSFiddle here
If you are just animating a background image, like that rabbit just set the background position like this:
background-position: 0 100%;
This will align the background to the bottom edge rather than the top.
For text content the same principle applies. You just have to position the content absolutely to the bottom edge. For example:
<div class="container">
<div class="content">
<p>Text</p>
</div>
</div>
Then use this CSS:
.container {
position: relative;
overflow: hidden;
}
.content {
position: absolute;
bottom: 0; left: 0;
}
The only issue with this is that you need to find the height of the content so that you know how much to expand the container.
To do this, you can use this jQuery:
var height = $('.content').outerHeight();
Then on the click event just animate to the correct height:
$('.container').animate({
'height': height
});
Hope that helps :)