Template:Flowing list/doc

Usage

If you have this problem of list bullets and numbers overlapping with a left floating image or Infobox, for example:

File:Bad Title Example.png

Test image

List of animals:

• cat
• dog
• horse
• cow
• sheep
• pig

then {{Flowlist}} enables lists to stay clear of these left floating objects. It effectively makes lists act as a block level element. It does however have a few side effects that you should take note of.

File:Bad Title Example.png

Test image

List of animals:

• cat
• dog
• horse
• cow
• sheep
• pig

This template can be used with or without {{endflowlist}}.

Examples

[[File:Bad Title Example.png|left|thumb|100px|Test image]] List of animals:
{{flowlist |
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
}}

File:Bad Title Example.png

Test image

List of animals:

• cat
• dog
• horse
• cow
• sheep
• pig

Alternative syntax

[[File:Bad Title Example.png|left|thumb|100px|Test image]] List of animals:
{{flowlist}}
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
{{endflowlist}}

File:Bad Title Example.png

Test image

List of animals:

• cat
• dog
• horse
• cow
• sheep
• pig

Parameters

• class – adds a CSS class to the containing div.
• style – adds CSS style options. Complex styles should not be used in articles (per wp:deviations) but may be acceptable on user, project, and talk pages.

Example: |style=border:solid 1px silver; background:lightyellow

Side effects

Using this technique has a side effect. If your list is longer than the floated element, then the list will not flow around the image like normal, but instead be one block, leaving white space below the floated element. This goes for both left and right side of the list.

This

File:Bad Title Example.png

Test image

File:Bad Title Example.png

Test image

List of animals:

• cat in a very long sentence that should collide with the image to the right
• dog in a very long sentence that should collide with the image to the right

Will become

File:Bad Title Example.png

Test image

File:Bad Title Example.png

Test image

List of animals:

• cat in a very long sentence that should collide with the image to the right
• dog in a very long sentence that should collide with the image to the right

See also

• {{endflowlist}}
• {{flatlist}}
• {{plainlist}}
• The history of this template
• Phabricator ticket

Horizontal list {{horizontal list|item1 |item2 }} item1 item2		Horizontal list {{flat list| * item1 * item2}} item1 item2		Horizontal list {{comma-separated list|item1 |item2 }} item1 item2
Bulleted list {{bulleted list|item1 |item2 }} item1 item2		Numeric ordered list {{Ordered list|first |second }} first second		Alphabetic ordered list {{Ordered list|list_style_type=lower-alpha |first |second }} first second
Unbulleted list {{unbulleted list|item1 |item2 }} item1 item2		Unbulleted list {{plain list| * item1 * item2}} item1 item2		Glossary or definition list {{glossary}} {{term|first term}} {{defn|first description}} Template:Tnull Template:Tnull {{glossary end}} first term first description second term second description
Bulleted list to flow around an image [[File:Bad Title Example.png|left|thumb|100px]] {{flowing list| *item1 *item2}} File:Bad Title Example.png item1 item2		Ordered list in columns {{columns list|colwidth=5em| # first # second}} first second