Template:Flowlist/doc: Difference between revisions

From HIBIKIFORUM
Jump to navigation Jump to search
(Created page with "{{Documentation subpage}} {{Uses TemplateStyles|Template:Flowlist/styles.css}}}} {{tsh|flist}} __NOTOC__ == Usage == If you have this problem of list bullets and numbers overlapping with a left floating image or Infobox, for example: left|thumb|100px|Animal Books 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 mak...")
 
mNo edit summary
Line 1: Line 1:
{{Documentation subpage}}
{{Documentation subpage}}
{{Uses TemplateStyles|Template:Flowlist/styles.css}}}}
{{Uses TemplateStyles|Template:Flowlist/styles.css}}
{{tsh|flist}}
{{tsh|flist}}
__NOTOC__
__NOTOC__
Line 31: Line 31:


== Examples ==
== Examples ==
<syntaxhighlight lang="html">
<pre>
[[File:Books.png|left|thumb|100px|Animal Books]] List of animals:
[[File:Books.png|left|thumb|100px|Animal Books]] List of animals:
{{flowlist|
{{flowlist|
Line 41: Line 41:
* [[pig]]
* [[pig]]
}}
}}
</syntaxhighlight>
</pre>


[[File:Books.png|left|thumb|100px|Animal Books]] List of animals:
[[File:Books.png|left|thumb|100px|Animal Books]] List of animals:
Line 55: Line 55:


;Alternative syntax:
;Alternative syntax:
<syntaxhighlight lang="html">
<pre>
[[File:Books.png|left|thumb|100px|Animal Books]] List of animals:
[[File:Books.png|left|thumb|100px|Animal Books]] List of animals:
{{flowlist}}
{{flowlist}}
Line 65: Line 65:
* [[pig]]
* [[pig]]
{{endflowlist}}
{{endflowlist}}
</syntaxhighlight>
</pre>


[[File:Books.png|left|thumb|100px|Animal Books]] List of animals:
[[File:Books.png|left|thumb|100px|Animal Books]] List of animals:

Revision as of 05:42, 16 June 2023

Light bulb.png }}
It contains usage information, categories and other content that is not part of the original template page.


Usage

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

Animal Books

List of animals:

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.

Animal Books

List of animals:

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

Examples

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

List of animals:

Alternative syntax
[[File:Books.png|left|thumb|100px|Animal Books]] List of animals:
{{flowlist}}
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
{{endflowlist}}
Animal Books

List of animals:

Parameters

  • |class= – adds a CSS class to the containing div.
  • |style= – adds CSS style options.

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

Animal Books
Animal Books
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

Animal Books
Animal Books
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

TemplateData

Create a list around left floating objects, like images and infoboxes.

Template parameters

ParameterDescriptionTypeStatus
Classclass

CSS class to containing <div> tag

Unknownoptional
Stylestyle

CSS style

Unknownoptional