CODEWITHSUNDEEP
htmlcsszurb-foundation-5
Laurent Meyer
Laurent Meyer

Reputation: 2881

Data-Equalizer Foundation 5 not working

I tried to use these data-equalizer on the foundation framework to be able to have the same height for each column and, from that, be able to center vertically a text in this column.

Here is the HTML: 

    <div class="row" data-equalizer>
<div class="small-2 columns" data-equalizer-watch style="background: #ff0000;">   
    <span>Monday:</span>
</div>
<div class="small-5 columns" data-equalizer-watch>
    <label>Start Time
        <input type="text" class="time start ui-timepicker-input" autocomplete="off" alt="{{timestampStart}}">
    </label>
</div>
<div class="small-5 columns" data-equalizer-watch>
    <label>End Time
        <input type="text" class="time end ui-timepicker-input" autocomplete="off" alt="{{timestampEnd}}">
    </label>
</div>

I also created a JSFiddle in order that you can see what I meant --> I want that the red background of the "Monday" goes until the end of the row.

Thanks for help.

Upvotes: 0

Views: 449

Answers (1)

adamjld
adamjld

Reputation: 310

Working version here: Fiddle

Make sure you include the Foundation equalizer script and initialise Foundation on page load.

$(document).foundation();

Upvotes: 1

Related Questions