Menu icon Foundation
Foundation 6 slider hidden on page load results in handle not properly placed

I have some sliders that are hidden on page load that I would like to have initial-values. Problem is that when I show the parent div the slider handles are all stuck on the left side.

The problem has been recreated in this codepen link below. In other areas I have read that "reflow" in Foundation 6 should be done with calling .foundation() on the element in question. This seems to only really apply to items that are getting added to the dom after page load not items that are hidden.

http://codepen.io/jeremysummers/pen/LbyzPb

 

Do I have to add them after showing my hidden div? Is there a better way?

sitesfoundation6sliderjavascript

I have some sliders that are hidden on page load that I would like to have initial-values. Problem is that when I show the parent div the slider handles are all stuck on the left side.

The problem has been recreated in this codepen link below. In other areas I have read that "reflow" in Foundation 6 should be done with calling .foundation() on the element in question. This seems to only really apply to items that are getting added to the dom after page load not items that are hidden.

http://codepen.io/jeremysummers/pen/LbyzPb

 

Do I have to add them after showing my hidden div? Is there a better way?

jeremy summers almost 3 years ago

Not crazy about it but just in case this helps anyone I found a way to force this to work by using z-index to "hide" my form.

Here is a quick example.

http://codepen.io/jeremysummers/pen/bBWoeO

Dimitris Gerasopoulos almost 3 years ago

Hi Jeremy,

You could use something like this :

 

$(document).foundation();

$('#toggleDiv').on('click', function(){
  $('#myHiddenDiv').toggle();
  Foundation.reInit('slider');
}) 

 

More about reInit you can find here: https://foundation.zurb.com/sites/docs/javascript.html#adding-content-to-plugins

jeremy summers almost 3 years ago

Thanks!