Using flickity to resize as tabs

Question

So I have a project now that is basically defusing bugs and this one in particular is a very annoying case. Flickity is supposed to be "resizing" a specific elements within <div> and working as tabs in the bottom to scroll to the specific informational element. However, all the text is just mashing together.

.

I have figured out, though, when you resize the browser, it works correctly and puts everything in its place by showing one <div> at a time and using buttons at the bottom to switch between <div>.

Here is the flickity part of the jQuery:

modalPopup(e, function() {
                if ($(".key .active").not("#resetFilters").length) {
                    $(".button-group").find($(".key .active").data("filter"));
                }
                else {
                    $('.button-group li:first-child').addClass('is-selected');
                }

                $('.button-group').on( 'click', 'li', function() {
                    var index = $(this).index();
                    $(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
                    gallery.flickity( 'select', index );
                });

                var gallery = $('.chapters').flickity({
                    // options
                    //imagesLoaded: true,
                    //percentPosition: false,
                    cellAlign: 'center',
                    contain: true,
                    prevNextButtons: false,
                    pageDots: false,
                    resize: true
                });
            });

Where modalPopup() is a function that loads in the information.

Any help or suggestions, are highly appreciated!

Granted this was years ago and I don't have access to that code, the only thing I can tell you is to set a width on the parent element as described in the answer. — Twister1002, Aug 05 '17 at 15:49
I think this doesn't have to the problem here. For example https://codepen.io/huykon225/pen/ZJLOMR — huykon225, Aug 06 '17 at 02:03

score 0 · Accepted Answer · answered Nov 19 '15 at 20:17

I have figured out the issue. The issue is that the width of the element I was using flickity on was at 0px width initially using CCS transitions. Flickity thought the width of the parent element was at 0px and therefore didn't expand out its width elements.

So if you use CSS transitions with flickity resize, make sure you have a width defined.

Using flickity to resize as tabs

1 Answers1