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?
Related
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
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.
I want to use AngularJS to apply filtering and sorting to a list of div elements, but for SEO reasons, I need this list of divs (and indeed the whole page) to have already been rendered on the page by the back end, in Velocity.
I was hoping using "track by" in the ng-repeat would let me do this by setting the ng-bind attribute on the div tag, and rendering the ng-repeat in each div, so it looks the same as when I inspect the list of divs rendered by AngularJS. both the Velocity context and the AngularJS model contain the same list of devices.
#foreach($device in $deviceList)
<div class="tile" ng-repeat="device in deviceList track by device.model" ng-bind="device.model">
<span ng-bind="device.brand">${deviceList.brand}</span>
<span ng-bind="device.model">${deviceList.brand}</span>
</div>
#end
but this just renders each item three times. Velocity renders the ng-repeated div, which itself renders for each. the track by doesn't link the identity of each Velocity-rendered div with its own contents.
any ideas?
I'm trying to animate between two divs when the route changes.
So far it works fine using ng-show and ngAnimate, but the second div contains the ng-view, which immediately disappears once the route changes. How do I wait until the ng-show animation completes before removing the ng-view from the DOM?
Live demo:
http://run.plnkr.co/7RLwUxwfUV4rb2kV/#/
Sample code: http://plnkr.co/edit/0ZatzKRKAyxUUfgslxum?p=preview
You are only animating ng-show in your CSS, but you're not animating when ng-view switches content. You animate ng-view with the .ng-enter and .ng-leave css classes. You can see an example here: http://dfsq.github.io/ngView-animation-effects/app/
My question is similar to this one and this one, but involves the new animations in AngularJS 1.2.0.
Basically, I have a bunch of elements on my signup page that are initially hidden and only displayed when a particular form element is invalid (they point to the invalid form element and display a message like "password needs to be at least 8 characters"). These messages fade in and out as they are shown/hidden.
But as soon as the signup page is displayed the elements are visible and fade out. They are briefly visible (they "blink" or "flash" on the screen, as is the case in situations where ng-cloak is necessary).
Here's a plunker to demonstrate the behaviour that I'm experiencing. In this plunker I have set up a basic route (the "login" page) that contains a box and a button that toggles the box's visibility. Notice how the box fades out when you click run? It should just be hidden. (I've deliberately set the animation to be slow so you can see the animation occurring).
How can I stop the animation from occurring initially?
What I've tried:
Set ng-cloak on the animating elements.
Use ng-cloak with the display: none !important rule added. (See this)
Setting display: none on the element, as if it were an "initial setting" for the element. (See this)
Interestingly, this plunker behaves properly and the animation doesn't occur initially. This plunker doesn't use routing and the controller is set explicitly on the body tag. I want to use routing though.
There's a problem with the version of angular you are using. Angular animate changed a lot I think in 1.2 so try this:
<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-route.min.js"></script>
Check it out, I've forked your plunker here
http://plnkr.co/edit/Mchjx51GREGU2Gj0NBXX?p=preview