adSlots: ad slot elements never get the mo-item class, so no layout rule applies

[MattOpen]

Summary

Ad slots created by adSlots never receive the mo-item class, so none of the library's own layout rules apply to them. In a two-column timeline the slot spans the full width instead of one column, gets no float, and the library's own height reservation never takes effect.

This affects both style: 'card' and style: 'fullwidth'.

Cause

_createAdSlot() (src/moTimeline.js:533) assigns the class list instead of adding to it:

_createAdSlot(fullWidth) {
  const slot = document.createElement('li');
  slot.className = 'mo-ad-slot';        // <- overwrites, so `mo-item` is never present
  if (fullWidth) slot.classList.add('mo-fullwidth');
  return slot;
}

Every layout rule in moTimeline.css is scoped to .mo-timeline > .mo-item:

.mo-timeline > .mo-item                     { float: left; width: 50%; ... }
.mo-timeline > .mo-item.mo-inverted         { float: right; }
.mo-timeline > .mo-item.mo-ad-slot          { min-height: 100px; }   /* line 308 */
.mo-timeline.mo-twocol > .mo-item.mo-fullwidth { clear: both; width: 100%; }

Since the slot only carries mo-ad-slot, none of these match.

Items get mo-item in _initItems() and insertItem(); ad slots are created in _injectAdSlots(), which never adds it.

Reproduction

Standalone page, only moTimeline.css and moTimeline.umd.js, no other CSS, config exactly as in the README "Ad slots" section (mode: 'every_n', interval: 3, style: 'card', theme: true, columnCount: {xs:1,sm:1,md:2,lg:2}), 12 items via addItems(), callback appends an <ins> as shown in the docs.

Measured at 900px container width, v2.13.2:

	ad slot	regular item
classes	mo-ad-slot	mo-item js-mo-item
computed width	900px	450px
computed float	none	left
computed min-height	0px	—

Expected per README: "The library provides a <li class="mo-ad-slot"> element with min-height: 100px (so the observer can detect it before content loads)".

The 0px height has a second consequence: an empty slot has no area, so the IntersectionObserver (threshold 0.5) may never fire and onEnterViewport is never called — the slot stays empty even when the visitor scrolls right past it.

Suggested fix

slot.className = 'mo-item mo-ad-slot';

or

slot.classList.add('mo-item', 'mo-ad-slot');

⚠️ Worth checking alongside: js-mo-item is deliberately not added, since _initItems() uses that selector to find real items and slots must not be counted as items. The CSS only needs mo-item.

Note

The live demo does not exercise adSlots anywhere — the option appears only in the documentation and in the bundled source. That is likely why this went unnoticed since the feature was introduced in v2.11.0.

[MattOpen]

Fixed in 9a94b31 (v2.13.3).

Your diagnosis was exactly right — _createAdSlot() assigned the class list instead of adding to it, so slots never carried mo-item and none of the .mo-timeline > .mo-item rules applied. Fix is the one you suggested:

slot.className = 'mo-item mo-ad-slot';

js-mo-item stays out, as you noted, so slots are still never counted as real items.

Measured in a browser at 900px+ container width, before → after:

	before	after
width	900px (full)	470px (one column)
float	none	left / right
min-height	0px	100px

The knock-on effect you flagged is confirmed too: with zero height an empty slot could miss the observer's 0.5 threshold, so onEnterViewport never fired. After the fix all slots fire on scroll.

Two things beyond the report:

• The demo page carries its own inlined copy of the library, which had the same bug and was missing the .mo-ad-slot CSS rule entirely — fixing only src/ would not have changed the demo.
• Your closing note was the root cause of the root cause: adSlots had no demo coverage. There is now an Ad Slots tab (card/fullwidth switch, live counter of fired slots), plus a Show setup code panel on every demo tab.

Thanks for the unusually precise report — the line number, the CSS scoping and the observer consequence were all correct.

[MattOpen]

Hinweis für Integratoren (angefragt von einer koordinierenden Session, die moTimeline in einem Feed einsetzt):

Die Ursache hatte eine zweite Hälfte, die in der Fehlerbeschreibung oben nicht steht: Neben der fehlenden Klasse fehlte auf der Demo-Seite auch die CSS-Regel .mo-ad-slot { min-height: 100px } vollständig.

Praktisch heißt das: Wer eigenes CSS mitbringt, statt dist/moTimeline.css einzubinden, kann denselben Effekt weiterhin sehen, obwohl die JS-Seite ab 2.13.3 korrekt ist. Der Slot ist dann zwar richtig platziert, aber 0 px hoch — und ein Slot ohne Fläche erreicht die 0.5-Schwelle des IntersectionObserver unter Umständen nie, sodass onEnterViewport nicht feuert.

Prüfschritt bei einer Integration, an einem leeren Slot gemessen:

	erwartet ab 2.13.3
Klassen	mo-item mo-ad-slot (ohne js-mo-item)
Breite	eine Spalte, nicht volle Containerbreite
float	left / right
min-height	100px

Weicht nur min-height ab, fehlt die CSS-Regel — nicht der Fix.