I am having a hard time getting a leaflet map to render correctly inside a div in my application.
It's probably worth mentioning I am using angularJS, angular-material (with flex based layouts) and ui-router, so the page that the div lives on is a template for a state being loaded when the user invokes an action to navigate to that page (e.g. through a navbar item click).
My template file for the state is pretty simple:
<md-card>
<div id='map' style="width: 500px; height: 500px;"></div>
</md-card>
In the controller file for the state, I have the following leaflet map initialisation code in place:
this.map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(this.map);
When the map is rendered, the tiles do not get constrained to my div, they spill out:
My dom structure can be found below
The parent element for my md-card becomes scrollable, so when I scroll down I start seeing other tiles too:
My initial thoughts were perhaps I have been trying to render the map too soon, before the div has had time to render. I therefore tried wrapping my map initialisation code in a timeout (2 seconds) and I do see my white md-card show up first when the state is loaded, and then the tiles appear after the 2 second delay, but again they appear as per my screenshots.
The only other thing I can think of is perhaps the usage of flex is having an effect, I am however specifying explicit height and widths on the div holding my map, so I would have thought the map would adhere to that size.
Can anyone offer any suggestions\help as to what could be going on here?
Thanks
Usual symptom of missing Leaflet CSS file
Related
After setting up the storybook-tailwind-dark-mode add-on for Storybook (by following these steps), my component is no longer displaying correctly in dark-mode in the Canvas view. The component displays correctly while in Document view and other components are displaying correctly in canvas view, so not every component has this issue.
The elements are visible for a split second before the page goes blank. When inspecting the page, I can see all of the elements are there, but they are just not visible.
The only difference to the HTML seems to be the dark class added to the body element.
Any ideas as to why the elements are no longer displayed would be greatly appreciated ⚡️
I've inspected the elements to see what could be causing the elements to not be displayed. I was expecting to see a change to display:none or an element that is in front of the other elements, causing them to be hidden, but it seems the only change is the dark class being added to body.
I've also looked at ./storybook/preview.js and ./storybook/main.js for anything suspicious but I haven't found anything that looks out of place.
There was a modal <div> that had a dark:bg-gray-800 class that was being overlayed over all of the other elements.
The modal was correctly set in light mode to show and hide according to when the modal was open/closed, but this conditional was not applied for dark mode, so the modal was always open, and hiding the other elements.
I have a layout which uses flex to resize its internal components to the window size.
Part of the left column has either some "control buttons" or an "event log" of which visibility can be toggled.
I'd like to animate that show/hide so the log messages div slides out from the right. When the log messages div is hidden, it will slide back towards the right.
The system is using AngularJS (not "Angular").
The majority of examples online show how to animate opacity to fade in and out and the few that show sliding animation use position: relative wrapping position: absolute elements. However, using absolute wrapping relative messes up the flex layout: wrong elements are visible and resizing doesn't work properly.
Any idea on how to achieve that effect?
Here is a fiddle showing the layout.
Thanks!
I have two divs one on top of the other.
The top div is revealed with ngAnimate and pushes the second div down.
I want to use a translateY animation to reveal the top div because it looks good.
#keyframes enter_not_smooth {
from {transform: translateY(-100px);} to {transform: translateX(0px);}
}
#keyframes leave_not_smooth {
from {transform: translateY(0px);} to {transform: translateY(-100px);}
}
Problem: The bottom div does not move smoothly as the top div is revealed, it instead jumps to it's final position.
If I use a height animation to reveal the top div the bottom div moves smoothly as the top div is revealed.
#keyframes enter_smooth {
from {height: 0px;} to {height: 100px;}
}
#keyframes leave_smooth {
from {height: 100px;} to {height: 0px;}
}
Please see this jsfiddle if you need clarification https://jsfiddle.net/9bz4Lwxa/105/
Question: Is there any way I can achieve a smooth animation using the translateY property or another property that will achieve a similar reveal animation where the top div does not grow in height but is full sized and just pushes the bottom div out of the way?
Thank You.
This is a tough one and something I've spent hours and hours and hours trying to accomplish. The only working solution I've come up with is really complicated and not worth all the extra code.
The problem is that when you use transform to animate an element, its bounding box remains static (seemingly behind the DOM scenes) and will not animate as to not affect any sibling elements. For reference, I'd read up on: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
As an alternative to animating height/width/etc (because it causes repaints/reflows in the browser) I've resorted to using transform animations that simply feel better given the predicament.
I've created an example based on your fiddle here:
https://jsfiddle.net/tommywhitehead/5q6wec92/1/
Note: It looks like you might be injecting ngAnimate in a non-traditional way so it's not reading the transition timing function (what places .ng-enter and .ng-enter-active at the right times) but I think this should give you the right idea.
I hope the big vendors can fix this somehow because this has been a huge issue for many devs.
Hope that helps!
I am using the MD-Slider with the md-discrete option to display the ticks on the track.
Strangely though the ticks of the slider within a directive template are not displayed. But outside the directive it works.
I have added a screenshot to show you. See the JADE code for this example:
div.sliding-footer-panel(ng-class="{ open: openFooter}" layout="column")
div.trigger(layout="column" layout-align="center center" ng-click="openFooter=!openFooter")
md-icon(ng-hide="openFooter" md-svg-icon="hardware:ic_keyboard_arrow_up_24px")
md-icon(ng-show="openFooter" md-svg-icon="hardware:ic_keyboard_arrow_down_24px")
md-slider.md-primary(md-discrete flex min="-0.5" max="4" step="0.5" aria-label="Change play rate")
div.footerContent(layout="column" flex)
audio-player
The directive audio-player loads the <audio> tag and the slider next to it.
The slide above the footerContent div is rendered correctly in the main view and renders the dots.
When I look at the canvas tag within the track element I see that its dimensions are 0. The one loaded outside the directive has normal dimensions.
So I recon the CANVAS tag is not loaded correctly via the directive. Anyone an idea how to fix this?
I am currently trying to build a slider on my page. The slider slides between different content, which means each slider has a different div height. This makes it hard to use animations since I need to use position:absolute; for those (to slide left/right). To work around this, I added a parent container with a position:relative; and used this directive to get equal height on my divs. However, the problem I am facing is that it only gets the height of the first visible div. Meaning it will work fine if the div with the highest height is shown first, but otherwise it won't work (since content will come outside of the slider).
How can I adjust this so that the equalizer gets the height of each div, and gets the one with the highest value in height, and uses that instead of the only visible one?
Additional info:
Using ng-show to show the current slide, and css3 animations.
The solution was pretty logical. I'm not that great with directives. But after some researching I saw that this directive had a function called equalize() - meaning I could only call EqualizerState.equalize() once I had added EqualizerState to my dependencies.