ampproject / ampproject/amphtml

amp-list cause line-break that cannot be reversed with CSS

Open
#23,675 24 comments 0 reactions 1 assignee Claimed by @caroqliu View on GitHub
Component: amp-list Customer: Developer P3: When Possible Stale Type: Bug Type: UX WG: components
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

Our goal is to implement a tool-tip similar to this Washington Post example:
https://www.washingtonpost.com/sports/2019/03/19/blake-bortles-signs-with-rams-one-year-deal-back-up-jared-goff/?utm_term=.6657442a70fc

Here are three scenarios to illustrate our issue:
https://dailyfood.io/amp/tooltip/question.html
A quick explanation of the 3 scenarios:
1 inline but *no* `amp-list` (to prove that `inline` keeps multiple `

`s together)
2 *one* `amp-list` (hierarchical); `amp-lightbox` for *EACH* `item`
3 multiple `amp-list` (_one_ _list_ _per_ `item`; multiple items); *one* `amp-lightbox` template

AMP page rendering adds CSS which, somehow-somewhere, forces a line break in scenario-3. Candidates:
```
i-amphtml-element
i-amphtml-layout
i-amphtml-fill-content
i-amphtml-replaced-content
```
Another possibility, from AMP documentation:
```
amp-list div[role="list"] {
display: grid;
grid-gap: 0.5em;
}
```

For us, this is a `severity-2` issue because we have a work-around (scenario-2). But scenario-2 dictates significant page-bloat due to "one `amp-lightbox` per item", and the `amp-mustache` item processing (#open /close) adds complexity and bloat.

Bottom line: we cannot use multiple `amp-list`s in a single paragraph, as is effectively achieved in the WaPo example:
https://www.washingtonpost.com/sports/2019/03/19/blake-bortles-signs-with-rams-one-year-deal-back-up-jared-goff/?utm_term=.6657442a70fc

Cathy Zhu @cathyxz looked at this issue and suggested we copy @CrystalOnScript Crystal Lambert on this thread.
Cathy thought Crystal might have a template/example that uses `amp-bind`, where we could bind an `amp-list` _item_ to a `` element (an inline element that would allow us to use _items_ from multiple `amp-list`s in a single `

`). We then would link the `amp-list` _item_ to an `amp-lightbox` template.

However, an **ideal** **solution** would fix scenario-3, without requiring the overhead of an `amp-bind` step. An `amp-bind` step makes the structure less portable/reusable among different documents.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.