I made a carousel with nxg-bootstrap, but when i try to add some slides dynamically with a button, i get indexerrors on click the arrows.
I have tryed to replace the complete slides array but same problem.
Stackblitz example: https://stackblitz.com/edit/ngx-bootstrap-itemperslide-carousel-example-jc4a8r?file=app/basic.html
have anyone a idea how can i fix this?
It seems dynamic ngx-carousel only works with one item per Slide. So if you remove the itemsPerSlide property and add the activeSliveIndex that would work.
I've forked your Stackblitz and make those changes to show you how it works:
https://stackblitz.com/edit/ngx-bootstrap-itemperslide-carousel-example-oxm55r
I hope that helps!
Related
Vuetify carousel - I cannot find the way to turn off the looping. I do not show images in my vuetify carousel, I use for a few steps for the user -passive steps, more like a description step by step and I don't need the loop in the carousel..
Thanks for help
[EDIT]
For those who are interested I ended up using vue-carousel
There is now a continuous (default=true) prop now.
You can turn it off by setting it like so: :continuous="false"
THe docs of Vuetify do not provide any info of such option.
But...
Since you do not use it as carousel but as stepper, why don't you use stepper..?
https://vuetifyjs.com/en/components/steppers
[EDIT]
Either I was blind yesterday or it just appeared - the docs mention now the cycle prop of carousel: https://vuetifyjs.com/en/components/carousels#api
I think you should give it a try by setting this to false. ;)
I am trying to create an effect similar to this (the demo uses Bootstrap Carousel):
https://codepen.io/SitePoint/pen/BpVrXP/
Bootstrap's 'slide.bs.carousel' returns a relatedTarget that is the slide element going to be displayed as soon as the carousel is moved i.e changed to another slide.
I haven't been able to find an equivalent data being returned in OwlCarousel2's changed.owl.carousel event. What event, if any, returns the element that's going to be in view?
Is there any alternative way or am I missing something?
Try the event translated.owl.carousel, translated is fired after the animation
I am trying to build an admin dashboard using material design framework. As a part of it, I am trying to add modal-trigger element inside a <td></td> tag of a table that uses datatable.js library. But when I click on the trigger no modal is appearing. Did anyone face similar issue before?
I think that what's happening is that your trigger isn't in the DOM when you draw the table, but without seeing your code I can't be sure. Generally, it will trigger a modal when it is clicked or something? You might want to change the actual triggering to clicking on a td with a given class contained within the table so something like this:
$(".modal-trigger").click(function(){//Open Modal});
This would work on the first page but not after the first draw of the table as the event had been registered before the elements were within the DOM. Rather, you'd need to listen to the click within the table like this:
$("#table-id").on("click", ".modal-trigger", function(){//Open Modal});
I hope that makes sense and that it helps, if not perhaps work up a JSFiddle illustrating your issue?
Here's another clue:
https://jsfiddle.net/68umt5b3/
Please note, that title of <span> is getting lost after first hovering. How can I preserve it?
Thanks!
There is no option to accomplish that, as otherwise the browser would display a native tooltip on top of Tooltipster's tooltip. Whatever you want to accomplish, do it in another way, for example with some "data-title" attribute.
I am using a Widget that contains a DataGrid object. The Widget works fine when included in the first tab (this is the visible tab), but not when I use the same code on a second tab.
The code is the same I have done several checks to make sure there are no other problems - and non Grid code is rendering fine - only the grid that has a problem. I have tried setting the height and width manually and this just results in a large grey rectangle on the second tab.
Do I need to tell the Grid to refresh in some way - or is it a property for the TabContainer?
Help - this is driving me mad!
Yeah, that's a big problem with the grid. If you use it declaritively in a tab container, it won't render properly on the non-visible tabs. It needs to calculate height/width (even though you specify them)...as you have seen.
The way I got around it was to create the grids programatically on tab select. I posted about my solution on the dojo forums. My code sample is over on github. It's a bit too large to post here methinks. Let me know if you want it, and i'll edit my answer.
There's also a discussion on nabble with a different solution.
"resize" works like a charm! Been looking for this for a long time (didn't know what I had to search for), thanks.
I use this routine to dynamically determine if the tab has more than one datagrid, as I may not know the ID of one single grid, maybe someone else might use that, too:
dojo.query('div#container div[id^="gridNode_"]').forEach(function(node, index, arr) {
dijit.byId(node.id).resize();
});
This will check the div with id="container" (skip that part if you want to search the whole DOM) for divs with an id starting with "gridNode_" and apply "resize" to those widgets.
An alternate approach is to resize the grid upon tab element selection. Sample code
dojo.connect(dijit.byId('my_tab_container'), "selectChild", function(child){
// if second tab (could be any...) selected
if(child.id == 'mySecondTabId'){
var myGrid = dijit.byId('myGridInsideTabId');
if(myGrid != null) myGrid.resize();
}
});