The bug

When you have multiple variation you can switch between them and AJAX will update the variation fields to reflect the values present in that variation. If there is a field that has no value for a variation then a container is created as a placeholder so AJAX has a target element to replace when the variation is changed.
This container is a DIV element, which has an implicit line break.

If some of your variation fields are intended to be displayed in an inline row of elements this breaks it by causing a line break anywhere there is no value for a field. Think like a set of badges or icons on a product to denote various characteristics of the product without taking up a bunch of space.

The solution

The code should use a SPAN to create a placeholder for ajax replacement of fields. SPAN elements are intended for this use case and will have no impact on layout or page semantics.

Issue fork commerce-3447691

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rhovland created an issue. See original summary.

rhovland’s picture

Merge request added. Change is very simple.
Since it appears container elements with no content are 0 height divs this should not affect anyone's layout that was relying on line spacing of empty divs.

rhovland’s picture

Status: Active » Needs review

Tests are now passing

jsacksick’s picture

The change is simple and looks straighforward, however the last time this code was touched, regressions were introduced (See #3120117: ProductVariationFieldRenderer's AJAXifiying breaks lazy_built fields (such as flags)), so a bit concerned that this change might introduce regressions somehow.

  • jsacksick committed 4c5c60fc on 8.x-2.x authored by rhovland
    Issue #3447691: Variation field renderer AJAX inserts div tags which can...
jsacksick’s picture

Status: Needs review » Fixed

Went ahead and merged this... Let's see if anything breaks...

  • jsacksick committed 7c636a64 on 3.0.x authored by rhovland
    Issue #3447691: Variation field renderer AJAX inserts div tags which can...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.