Zurb Foundation Slider - Absolute Pos Issue

Question

I am wanting to use a range slider within my "overlay". As shown below:

<div class="overlay">

  <div class="range-slider" data-slider data-options="start: 1; end: 10;">
    <span class="range-slider-handle" role="slider" tabindex="0"></span>
    <span class="range-slider-active-segment"></span>
    <input type="hidden">
  </div>

  <button>Ok</button>
  <button>Cancel</button>
</div>

But the slider does crazy things and doesn't work due to absolute positioning of the overlay css shown below:

.overlay{
  position:absolute;
  top:0px;
  left:0px;
  bottom:0px;
  right:0px;
  background-color:#FFF;
  opacity: 0.85;
  padding: 50px;
}

But when I position the range slider outside of the overlay it works perfect.

I think it's something to do with the absolute width/height as when I click it it just keeps extending to the right off the page.

Has anyone experienced this before and able to offer advice?

The whole point of this is I click my box, an overlay appears with a range slider within it. I am using angular.

Thanks

Answer 1

you didn't give a width to the absolute positioned overlay, so js can't calculate animations properly.

Basically, in CSS, you must always specity a width (even relative) for an absolute positioned block.