EqualHeightScratchpad.md

Details/summary

Problem:

• The height of a details/summary element pair is equal to the height of the summary element only when the details element is collapsed.
  • The details/summary element must be expanded before its height can be calculated.
• Setting an equal height on a collapsed element makes it take up the space it would take up while expanded even though it is collapsed.
  • The equal height should only apply when at least one more details/summary element pair is expanded on the same baseline.

Temporarily expanding a detail/summary element pair:

elm.setAttribute("open", "open")
elm.offsetHeight
elm.removeAttribute("open")

Determining if at least two expanded details/summary pairs exist on the same baseline:

function rowHasMultipleExpandedElements(row) {
    var i,
        count = 0;

    for (i = row.length -1; row !== -1; i -= 1) {
        if (row[i].hasAttribute("open")) {
            count += 1;
        }

        if (count === 2) {
            return true;
        }
    }

    return false;
}

Storing the height to trigger when the detail/summary is expanded:

$elm.data("min-height", height);

Triggering the equal height:

var i;

if (rowHasMultipleExpandedElements(row)) {
    for (i = row.length -1; i !== -1; i -= 1) {
        row[i].style.minHeight = $(row[i]).data("min-height");
    }
}

EqualHeightSpecifications.md

Description

The equal height plugin equalises the heights of multiple elements if they are rendered on the same baseline.

How to use

To trigger the equal height plugin, add the class wb-eqht to the element containing the elements whose height you want to equalise.

Configuration options

The equal height plugin has no configuration options.

User interface

The equal height plugin has no user interface.

Triggering events

• Page load
• Text resize
• Window width resize
• Window height resize
• DataTable draw

Assumptions

1. The elements for which the height is to be equalised have a fixed width that is less than 100%, for at least two sequential elements, but not all necessarily have the same width. A width of 100% for all elements would mean that all elements are on their own baseline and therefore there is no need to equalise them. If the two elements that have a width of less than 100% are not sequential, then they cannot be on the same baseline and therefore there is no need to equalise them.
2. The elements for which the height is to be equalised have a CSS display value of inline-block or inline-table. No other display value can produce a list of fixed-width elements that wraps.
3. At least two of the elements for which the height is to be equalised have different heights. But we cannot assume that those two elements will be on the same baseline.

Functionality

Determining if two elements are on the same baseline

t' <= (t + h) && (t' + h') >= t

The top of the target element is not beyond the combined top and height of the base element and the combined top and height of the target element are not beyond the top of the base element.

Cost: 4 reflows + repaints per comparison to get the offsetTop and offsetHeight of each element.

Number of comparisons: r(n - 1) where r is the number of rows and n is the number of elements per row.

Questions

1. What is the default vertical alignment for display: inline-block and for display: inline-table for each browser?