Doesn't correctly resize

[constip]

I noticed that the slider only re-sets the width and height on the wrapper of width is not set. When manually clearing the attribute it immediately gets set on resizing, when one is there already it isn't changed.

[constip]

Playing around a little, this only seems the case if the present value is a pixelvalue, values in percent or auto get overwritten...

I believe this is because when a width is set, the getComputedWidthAndHeight functions doesn't return new values (as they are fixed already), however when a dynamic value is set, the dimensions really change.

[stefgg]

I do something like this, for example:

window.addEventListener('load', function () {
    window.juxtapose.sliders.forEach(function (slider) {
        slider.wrapper.style.width = '100%'; // fit slider width to its parent container
        slider.setWrapperDimensions(); // refresh slider heights
    });
}
``

[carlo-13]

Hi there I had the same issue when resizing the windows on Safari ( Mac ).
Would be best to replace the value with height: 80vh; ( maybe 50vh on mobile ) width:auto; ?

[carlo-13]

Quick fix:

CSS to add:

.juxtapose-custom{ width:auto; height:40vh; min-height:300px;} @media (min-width: 576px) { .juxtapose-custom{ width:auto; height:45vh; min-height:300px;} } @media (min-width: 768px) { .juxtapose-custom{ width:auto; height:50vh; min-height:400px;} } @media (min-width: 992px) { .juxtapose-custom{ width:auto; height:65vh; min-height:500px;} } @media (min-width: 1200px) { .juxtapose-custom{ width:auto; height:80vh; min-height:600px;} }

In javascript file replace this ( line 443 in juxtapose.js ):

this.wrapper.style.height = parseInt(dims.height) + "px"; this.wrapper.style.width = parseInt(dims.width) + "px";

By this:

this.wrapper.classList.add("juxtapose-custom");