imported>Alexiscoutinho: /* Usage */ Removed now unused characters in 'display: inline-block;'

2020-03-16T18:53:06Z

Usage: Removed now unused characters in 'display: inline-block;'

New page

{{Documentation subpage}}

== Usage ==
The template {{tlf|Inline block}} creates an element—by default a {{tag|span|o}}—that has the [[CSS]] property <code>display:inline-block</code>. There is support for a range of common style properties as template parameters, and an all-purpose <code>style</code> parameter.

One intended use is to replace {{tl|nowrap}} when coding templates with complex layout, which need to display differently on mobile and desktop. Like {{tlf|nowrap}}, it holds content together and avoids wrapping it where possible. However, if necessary, such as on small screens, the content will wrap.

===Example of wrapping control===
In each case the outline represents a width constraint, which might be affected by the user's screen size, other parts of the template, or both.

<div style="width: 900px; border: 1px solid gray; margin: 3px; padding: 3px;">
{{inline block|style=margin:0.2em; text-align:center; min-width:9em;|color={{element color|Gas}}|background={{element color|table2}}|1= 1 (red)=[[Gas]]}}&ensp;{{inline block|style=margin:0.2em; text-align:center; min-width:9em;|color={{element color|Solid}}|background={{element color|table2}}|1=3 (black)=[[Solid]]}}&ensp;{{inline block|style=margin:0.2em; text-align:center; min-width:9em;|color={{element color|Liquid}}|background={{element color|table2}}|1=80 (green)=[[Liquid]]}}&ensp;{{#ifeq:no|yes|{{inline block|style=margin:0.2em; text-align:center; min-width:9em;|color={{element color|Unknown phase}}|background={{element color|table2}}|1=109 (gray)=Unknown}}&ensp;}}{{Inline block
|{{#ifeq:%omitted%|%omitted%|'''Color of the atomic number''' shows [[state of matter]] (at [[Standard conditions for temperature and pressure|0 °C and 1 atm]])|}} }}</div>
<div style="width: 500px; border: 1px solid gray; margin: 3px; padding: 3px;">
{{inline block|style=margin:0.2em; text-align:center; min-width:9em;|color={{element color|Gas}}|background={{element color|table2}}|1= 1 (red)=[[Gas]]}}&ensp;{{inline block|style=margin:0.2em; text-align:center; min-width:9em;|color={{element color|Solid}}|background={{element color|table2}}|1=3 (black)=[[Solid]]}}&ensp;{{inline block|style=margin:0.2em; text-align:center; min-width:9em;|color={{element color|Liquid}}|background={{element color|table2}}|1=80 (green)=[[Liquid]]}}&ensp;{{#ifeq:no|yes|{{inline block|style=margin:0.2em; text-align:center; min-width:9em;|color={{element color|Unknown phase}}|background={{element color|table2}}|1=109 (gray)=Unknown}}&ensp;}}{{Inline block
|{{#ifeq:%omitted%|%omitted%|'''Color of the atomic number''' shows [[state of matter]] (at [[Standard conditions for temperature and pressure|0 °C and 1 atm]])|}} }}</div>
<div style="width: 150px; border: 1px solid gray; margin: 3px; padding: 3px;">
{{inline block|style=margin:0.2em; text-align:center; min-width:9em;|color={{element color|Gas}}|background={{element color|table2}}|1= 1 (red)=[[Gas]]}}&ensp;{{inline block|style=margin:0.2em; text-align:center; min-width:9em;|color={{element color|Solid}}|background={{element color|table2}}|1=3 (black)=[[Solid]]}}&ensp;{{inline block|style=margin:0.2em; text-align:center; min-width:9em;|color={{element color|Liquid}}|background={{element color|table2}}|1=80 (green)=[[Liquid]]}}&ensp;{{#ifeq:no|yes|{{inline block|style=margin:0.2em; text-align:center; min-width:9em;|color={{element color|Unknown phase}}|background={{element color|table2}}|1=109 (gray)=Unknown}}&ensp;}}{{Inline block
|{{#ifeq:%omitted%|%omitted%|'''Color of the atomic number''' shows [[state of matter]] (at [[Standard conditions for temperature and pressure|0 °C and 1 atm]])|}} }}</div>

Here, each grey box and the text "Color of ..." are wrapped in {{tlf|inline block}} templates. If {{tlf|nowrap}} had been used instead, there would be no visible difference in the first two cases. In the third case, however, the text would have been unable to wrap into the space available. On mobile, this might mean that a table or the whole article is forced to become horizontally scrollable.

==TemplateData==

{{Format TemplateData|JSON=
{
"params": {
"1": {
"label": "Content",
"description": "The content to be wrapped in an inline-block element",
"type": "content"
},
"2": {
"label": "Tag name",
"description": "Changes the [[HTML tag]] used. This may affect what elements this template should contain or be contained by.",
"example": "div, abbr",
"type": "string",
"default": "span"
},
"title": {
"label": "Title",
"description": "Title of the content (used as tooltip text, or expanded abbreviation when 2=abbr",
"example": "died (for abbr d.)",
"type": "string",
"default": ""
},
"width": {
"label": "Width",
"description": "The width; passed directly to the \"width\" [[CSS]] attribute",
"type": "string"
},
"height": {
"label": "Height",
"description": "The height; passed directly to the \"height\" CSS attribute",
"type": "string"
},
"color": {
"label": "Text color",
"description": "The text color; passed directly to the \"color\" CSS attribute",
"type": "string"
},
"background": {
"label": "Background formatting",
"aliases": ["bg"],
"description": "The background formatting; passed directly to the \"background\" CSS attribute",
"type": "string"
},
"style": {
"label": "Other styles",
"description": "Style information as plain CSS.",
"type": "string"
}
},
"description": "The template {{Inline block}} creates an inline-block element. Among other uses, it can replace {{tl|nowrap}} when coding templates with complex layout."
} }}

==See also==
{{List of nowrap-like templates}}

<includeonly>{{sandbox other||

[[Category:Line-handling templates]]
}}</includeonly>

Template:Inline block/doc - Revision history

imported>Alexiscoutinho: /* Usage */ Removed now unused characters in 'display: inline-block;'