Admin: 1 revision

2014-03-27T06:48:59Z

1 revision

Edokter: sortkey

2012-09-09T11:07:37Z

sortkey

New page

{{Documentation subpage}}


===Usage===
If you have this problem of list bullets and numbers overlapping with a left floating image or Infobox, for example:
[[File:Example.png|left|thumb|100px|Test image]] List of animals:
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
{{clear}}

then {{tl|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|side effects]] that you should take note of.
[[File:Example.png|left|thumb|100px|Test image]] List of animals:
{{flowlist}}
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
{{endflowlist}}
{{clear}}
This template can be used with or without {{tl|endflowlist}}.

===Examples===
<pre><nowiki>
[[File:Example.png|left|thumb|100px|Test image]] List of animals:
{{flowlist |
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
}}
</nowiki></pre>

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

;Alternative syntax:
<pre><nowiki>
[[File:Example.png|left|thumb|100px|Test image]] List of animals:
{{flowlist}}
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
{{endflowlist}}
</nowiki></pre>

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

===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: {{para|<var>style</var>|<var>border:solid 1px silver; background:lightyellow</var>}}

===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.
<div style="width:30em; display:inline-block; vertical-align:top; border: 1px dotted; padding: 1em; margin-right:2em; ">
====This====
[[File:Example.png|left|thumb|20px|Test image]][[File:Example.png|right|thumb|20px|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
</div><div style="width:30em; display:inline-block; vertical-align:top; border: 1px dotted; padding: 1em;">
====Will become====
[[File:Example.png|left|thumb|20px|Test image]][[File:Example.png|right|thumb|20px|Test image]] List of animals:
{{flowlist}}
* [[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
{{endflowlist}}
</div>
{{clear}}
===See also===
* {{tl|endflowlist}}
* {{tl|flatlist}}
* {{tl|plainlist}}

<includeonly>{{#ifeq:{{SUBPAGENAME}}|sandbox||

[[Category:Wikipedia list formatting templates|Flowlist]]

}}</includeonly>

← Older revision	Revision as of 06:48, 27 March 2014
(No difference)

Template:Flowlist/doc - Revision history

Admin: 1 revision

Edokter: sortkey