Equaliser

[wichert]

A common layout problem is that one like to have a group columns that are visually outlined to be of equal height, regardless the content in the columns. In CSS this is often difficult to achieve.

I propose an equaliser pattern for this.

Consider the following markup:

<div class="row pat-equaliser">
    <div class="six columns">
        <div class="panel">
            <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.
            </p>
        </div>
    </div>
    <div class="six columns">
        <div class="panel">
            <p>
                Minimal content
            </p>
        </div>
    </div>
</div>

pat-equaliser would measure it's direct child elements. Each direct child element then gets the height equal to the content height of the tallest measured direct child element.

The calculation is repeated upon:

• Window resize
• Depends pattern happening within the pat-equaliser container
• Toggle pattern happening within the pat-equaliser container
• Switch pattern happening within the pat-equaliser container
• Inject pattern happening within the pat-equaliser container
• Other?

This CSS is required to make .panel take the of a column that has an absolute height on it:

.column > .panel,.columns > .panel {
    height: 100%;
}

[wichert]

@cornae can you clarify this sentence: "Each direct child element then content height of the content height of the tallest measured direct child element."

[cornae]

It was badly phrased. I rephrased to "pat-equaliser would measure it's direct child elements. Each direct child element then gets the height equal to the content height of the tallest measured direct child element."

[wichert]

Can you confirm you envision this working as follows:

1. set height style to auto for all direct children
2. measure height of all children
3. set height style to the maximum height found in step 2

Step 1 is necessary to make sure we can remeasure on resize/update, but it does mean any existing height style set in CSS will be ignored.

[cornae]

That, but without step 1. I don't understand why that would be necessary even after resize. Can you clarify that?

[wichert]

In order to redo the height calculation I must re-measure the height of all children. But I can not do that if they already have their height fixed by this pattern. If I skip step 1 I will always get the same height again and an update will never do anything useful.

[cornae]

But couldn't you simply remove the applied inline height instead of setting it to auto? Also, why would the tallest one get a fixed height is its already the tallest?

[wichert]

Implemented in a new pat-equaliser branch. Can you check if this behaves as desired and update the demo if needed?

[cornae]

The demo looks good as far as I can see now. I experimented with an animated column height, but as soon as I put a CSS transition on the column, it doesn't recalc the height anymore. Possibly because the with the height auto, the transition hasn't finished before the new height is calculated. Would it be a better idea to animate the height with .js?

Alternately, you could put a class 'equalised' on the equalised elements that is temporarily removed also when you put the height auto on it.

Op 11 jun. 2013, om 14:12 heeft Wichert Akkerman notifications@github.com het volgende geschreven:

Implemented in a new pat-equaliser branch. Can you check if this behaves as desired and update the demo if needed?

—
Reply to this email directly or view it on GitHub.

[wichert]

We could make it an option that defaults to not being animated. I think I would find animation here very annoying.

[cornae]

What about my suggestion with the class? Would it work? Then it would be an 'option' you set in the CSS which is the best place for it if possible.

Op 12 jun. 2013, om 11:32 heeft Wichert Akkerman notifications@github.com het volgende geschreven:

We could make it an option that defaults to not being animated. I think I would find animation here very annoying.
—
Reply to this email directly or view it on GitHub.

[wichert]

I don't set height: auto currently, I just remove any inline height style. So it must be something else.

[cornae]

Then forget the auto height in my sentence. Does my theory still make sense? Or do you see another reason why it doesn't work now.

Op 12 jun. 2013, om 11:34 heeft Wichert Akkerman notifications@github.com het volgende geschreven:

I don't set height: auto currently, I just remove any inline height style. So it must be something else.

—
Reply to this email directly or view it on GitHub.

[wichert]

CSS animations will indeed break our measurements since we'll effectively be measuring an element while it is just starting its animation, so Don't Do That(tm). We could use a temporarily measuring class so you could disable CSS animations when that is present, but that makes writing CSS quite complex.

[cornae]

Does this mean that my suggestion to do it the other way around wouldn't work?

Op 12 jun. 2013, om 11:53 heeft Wichert Akkerman notifications@github.com het volgende geschreven:

CSS animations will indeed break our measurements since we'll effectively be measuring an element while it is just starting its animation, so Don't Do That(tm). We could use a temporarily measuring class so you could disable CSS animations when that is present, but that makes writing CSS quite complex.

—
Reply to this email directly or view it on GitHub.

[wichert]

The other way around being javascript animations?

[cornae]

"Alternately, you could put a class 'equalised' on the equalised elements that is temporarily removed also when you put the height auto on it. "

So when you remeasure, remove the class equalised and put it back when you have a new height.

Op 12 jun. 2013, om 12:02 heeft Wichert Akkerman notifications@github.com het volgende geschreven:

The other way around being javascript animations?

—
Reply to this email directly or view it on GitHub.

[wichert]

I pushed JS animations. Can you check if they work correctly?

[cornae]

Looks great. I assume works with depends as well in the same way?

Of another note: I can't get 'swing' to work for easing. Also, the default looks linear (Or a very small ease-out) to me more than swing. And the other values are missing in the values column. Is swing and linear available now only?

Op 12 jun. 2013, om 16:03 heeft Wichert Akkerman notifications@github.com het volgende geschreven:

I pushed JS animations. Can you check if they work correctly?

—
Reply to this email directly or view it on GitHub.

[wichert]

The documentation is explicit about what is supported:

Easing to use for the transition. This must be a known jQuery easing method. jQuery includes swing and linear, but more can be included via jQuery UI

Since the list of possible options depends on what javascript a user has loaded we can't document it any better than that.

[cornae]

Whatever is called 'swing' here doesn't look like one. Swing in when the movement is exaggerated. But maybe jQuery is holding on to its own names? It looks like ease-in-out in a very subtle way, or just linear to me. Remains the fact that I don't see a difference between swing and linear.

We can't rely on any JavaScript a user has loaded. In fact, the value proposition of Patterns for a designer is that it's the only script you'll have to load. So if we want more animations, we would have to pack that Patterns. For now I would stick with what we have, provided that they actually work.

Op 12 jun. 2013, om 17:51 heeft Wichert Akkerman notifications@github.com het volgende geschreven:

The documentation is explicit about what is supported:

Easing to use for the transition. This must be a known jQuery easing method. jQuery includes swing and linear, but more can be included via jQuery UI

Since the list of possible options depends on what javascript a user has loaded we can't document it any better than that.

—
Reply to this email directly or view it on GitHub.