Workaround for Foundation Equalizer plugin functionality?

rstav · Post by **rstav** » Thu Oct 12, 2017 9:37 am

I'm creating a homepage for our doc site (HTML5 Top Navigation) using Foundation's grid. The main design is simply a row with two columns. One column uses a hero image set as the background image, and the other is simply a color background.
I'd like to be able to use the equalizer plugin from foundation to make both columns the same height. I've got data-equalizer attributes set with empty values. My understanding is that, although HTML5 Top Nav skin pulls in a custom version of Foundation 6.2.3, it doesn't include the full framework including plugins like equalizer. For a test, I added this link (in the header) and script (right above the body tag) to the master page for this home page to see if I could easily reference foundation.min:

Code: Select all

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin="anonymous" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js" integrity="sha256-Nd2xznOkrE9HkrAMi4xWy/hXkQraXioBg9iYsBrcFrs=" crossorigin="anonymous"></script>

Here is what I've got going on in the HTML:

Code: Select all

 <body>
        <div class="row medium-collapse large-collapse" data-equalizer="">
            <div class="small-12 medium-5 large-5 columns topichero" data-equalizer-watch="">
                <img src="Resources/Images/Icons/image.png" />
            </div>
            <div class="small-12 medium-7 large-7 columns gray-side" data-equalizer-watch="">
                <div class="row medium-collapse large-collapse">
                    <div class="small-12 medium-10 large-10 columns top-row">
                        <h1>Sample H1</h1>
                    </div>
                </div>
                <div class="row">
                     <div class="small-10 medium-9 large-8 medium-centered large-centered columns developer-center">
                            <h2>Same H2</h2>
                            <h3>Sample H3</h3>
                            <p>Foo</p>
                            <h3>Sample H3</h3>
                            <p>Foo</p>
                     </div>
                </div>
                <div class="row">
                        <div class="small-10 medium-9 large-8 medium-centered large-centered columns user-guide">
                            <h2>Sample H2</h2>
                            <h3>Sample H3</h3>
                            <p>Foo</p>
                            <h3>Sample H3</h3>
                            <p>Foo</p>
                        </div>
                </div>
            </div>
        </div>
    </body>

Is there any way to make the equalizer plugin work with Flare? Or if not, do you have any CSS or JS tips to make the columns equal in height? Since it's a responsive layout, I don't want to just set the height to something fixed. I toyed with using height:90vh for both columns, but that removed the ability to scroll through the content.

Thanks!