i am using Angular UI Bootstrap carousel with angular-nvd3 chart and on the first slide the chart displays fine but the resto of the slides the chart is horizontally squeezed. is there a way to fix this problem?
<carousel interval="5000">
<slide ng-repeat="slide in [1,2,3,4,5]" >
<nvd3 options="sva.options" data="sva.data"></nvd3>
</slide>
</carousel>
here is the code on plunker
Thanks :)
I had the same issue, while i was trying to have gridster into carousel and charts kendo into that gridster.
i finally had it resolved by refreshing the binding of the chart based on the current active slide.
put a watch on the current scope and check which slide is active and rebind the data of the chart.
Related
I added three sliders in my hero section, first slider only animation working, another two slider animation not working what should I do now?
I used https://michalsnik.github.io/aos/ this for animation, and https://www.npmjs.com/package/react-slick-carousel this for carousel.
<div data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-mirror="true"
data-aos-once="true">
<h2>test</h2>
</div>
I'm trying to implement an Angular UI Bootstrap Carousel and have HTML in the texts. Thought I could use something like
text: $sce.trustAsHtml('Nice image <br />test')
but apparently that doesn't work and I've no clue why.
Plunkr: https://plnkr.co/edit/9PvaS8SoRmN1o52wiAf8?p=preview (fork of the offical example from the docs).
Use ng-bind-html directive to display html content on view
<p ng-bind-html="slide.text"></p>
Demo Plunkr
I have a problem getting the active slide in an Angular-UI Bootstrap carousel outside the carousel.
I have a panel, with the carousel inside, and want to put buttons in the footer of the panel that makes actions using the selected slide, but using jquery selectors is not an option.
I want to implement it using something in pure angular.
I think I can use the active attribute, but maybe there is something clever that can do the trick more smoothly.
Some code (Jade syntax):
.panel.panel-info
.panel-body
carousel.imgCarousel(interval='5000')
slide(ng-repeat='media in selCard.superviseTab.media')
img.img-responsive(preload-image ng-src='/api/cards/{{selCard.superviseTab.sID}}/media/{{$index}}')
.carousel-caption
multiSelect
h4 Slide {{$index+1}} of {{selCard.superviseTab.media.length}}
p {{media.originalFilename}}
.panel-footer
.navbar-collapse.collapse
ul.nav.navbar-nav.navbar-left
li
a.btn.btn-danger
i.fa.fa-unlink
If you look at the AngularUI documentation, you can see this is how the slides are integrated into the HTML:
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
...
</slide>
</carousel>
We can see that the active slide is determined by the active property on each slide.
So, you should be able to iterate through the slides and return the first slide with the active property on it. As long as you haven't modified the slides array outside of this carousel, it should give you the index of the current slide.
For example, something like:
function isActive(slide) {
return slide.active;
};
$scope.getActiveSlide = function() {
var activeSlides = $scope.slides.filter(isActive)[0];
//return the first element, since the array should only return one item
};
Should do the job (or however you choose to implement your find functionality).
I have used AngularJS,KendoCharts and Bootstrap in my project. I have used nav-tabs and have added three tabs on my screen which display three different Kendo charts. All is working well but I am facing one issue. When I click on second tab, the Kendo chart is not displayed on the whole screen but if I add a button on the screen which refresh the chart then it works fine and occupies the whole space. But why this is not occupying the whole space the first time it is shown. I tried various solutions/workarounds but none is fulfilling my criteria.
-- I added the width in the chart area of the chart and that works but then it disturbs the responsiveness of the chart.
-- I tried refresh/redraw on the chart after creating it in the angular controller/service but that also failed and gave the error that the id of the chart is undefined.
How can I refresh/redraw the chart after it is created in angular. I do not want any code in html, it should come happen in angular files. Or can this problem be resolved in any other way.
You can use Bootstrap Grid System. In your HTML, Create a row, then a column of span 12. In that column put your chart.
e.g.:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<!-- your chart goes here -->
</div>
</div>
It should work.
How to make the Kendo chart on mobile responsive?
I've done small directive:
app.directive("chartAligner", function ($window) {
return function (scope, element) {
var _kChart;
angular.element($window).bind('resize', function () {
if (_kChart) {
_kChart.resize();
} else {
_kChart = element.getKendoChart()
}
});
};
});
I used button click to change the route to the next page. Angular JS retain the scroll position and doesn't scroll to the top of the ng-view.
1. Disabling $anchorScroll doesn't work
2. Using window scroll to doesn't work
$rootScope.on("$routeChangeSuccess", function(){
window.scrollTo(0,90);
})
However, to keep the fix header on iPad, the following window scroll works.
$(document).on('blur', 'input, textarea', function() {
setTimeout(function() {
window.scrollTo(document.body.scrollLeft,document.body.scrollTop);
}, 0);
});
Any suggestions? How to clear the stored scroll positions by angualar js view?
What you want is not disable anchorscroll, but enable it. You can achieve what you want using the following code:
<div data-ng-view data-autoscroll="true"></div>
or:
<div data-ng-view data-autoscroll></div>
as pointed in the AngularJS docs.
Minor update to #Rafael's answer.
Since Angular 1.3.14 you can use simpler syntax to enable autoscroll to the top when switching views with ngView:
<div ngView autoscroll></div>
Angular Docs
Have you tried setting autoscroll to false on your ng-view element?
<div data-ng-view data-autoscroll="false"></div>