• Getting Started
  • Writing for UQ Drupal
  • Configuring site title
  • Site Editor Training
  • Planning your website
  • Administrator view
  • Alert boxes
  • Content Writing
  • Building a homepage
  • Writing for the Web
  • Site Coordinator Training
  • Banners
  • User types
  • Legacy system support section
  • Accessibility
  • Blocks
  • UQ School Template Training
  • Logging in
  • Administration
  • Brand Colours
  • Views
  • Design & Build
  • Images for the web
  • Buttons
  • Display Suite
  • UQ Base theme: Style Guide
  • Equal height elements
  • Search Engine Optimisation
  • Image Styles
  • For Developers
  • DS Inception
  • Forms
  • Drupal Glossary
  • Creating a sandbox
  • Icons
  • How to create banners
  • Training
  • List with lead
  • Google Analytics
  • UQ School Theme: Style Guide
  • Panels
  • UQ Base Regions
  • Utility classes
  • UQ Base theme
  • Quicktabs
  • Webforms
  • Tables
  • Toggle
  • Typography
  • UQ News RSS feeds
  • Block grid
  • Demo form
  • Date and Time
  • Grid
  • Menus
  • Name space standards
  • Theme settings
  • URL patterns
  • Central data
  • Maintenance mode
  • Site search
  • Developer Virtual Machine
  • Developer Contribution Workflow
  • UQ Base theme updates
  • Modules available for use in UQ Drupal
  • Migration Classes
  • DS Inception V3
  • Automated Tests
  • Equal height elements

    Equalise is a javascript that sets equal heights on a set of elements. For instance a grid list with different lengths of content; equalise will set them all to have the same pixel height as the tallest element in the set.

    How to use

    Add the class .equalise to the parent of the elements you want to have equal heights.

    Add .equal-height to each of the elements.

    <ul class="equalise">
    
        <li class="equal-height">Short content</li>
    
        <li class="equal-height">Longer content than the short content</li>
    
        <li class="equal-height">Longest content of them all so that this is the list item that defines the height for all of the items in this list</li>
    
    </ul>

    Example

    Previous (UQ Base theme: Style Guide)Next (Search Engine Optimisation)