Bug: Collect into... CSS error

Bug: Collect into... CSS error

CruzR's picture

The Problem

When using the Collect into... feature on the search page, all elements of the 'field-name-collect-toggle' class collapse into one position.

The Reason

The 'field-name-collect-toggle' class uses a 'position' property value of 'absolute'. According to CSS 2.1, the position of such elements is determined the following way:

The box's position (and possibly size) is specified with the ‘top’, ‘right’, ‘bottom’, and ‘left’ properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Though absolutely positioned boxes may have margins, those margins do not collapse with any other margins.

The containing block is defined as follows:

 If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:

  1. In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
  2. Otherwise, the containing block is formed by the padding edge of the ancestor.

If there is no such ancestor, the containing block is the initial containing block.

 Unfortunately, the nearest ancestor with a 'position' other than 'static' is the 'block-system-main' element.

The Solution

  • Set the 'position' of the 'view-mode-art_preview' class to 'relativ'.
  • Make sure that elements of the 'field-name-collect-toggle' class are inserted into their 'view-mode-art_preview' parents after all their siblings.