Difference between revisions of "Template:Spacer"

From GodWiki
Jump to: navigation, search
m (Correct docs)
(Add |width= / |w= parameter to override default width)
 
Line 1: Line 1:
<div style="display:inline-block;min-width:15em;height:0px;"> </div><noinclude>
+
<div style="display:inline-block;min-width:{{{width|{{{w|15em}}}}}};height:0px;"> </div><noinclude>
 
{{doc|content=
 
{{doc|content=
This template inserts an <code>inline-block</code> spacer {{tag|div}} with <code>min-width: 15em</code> and <code>height: 0px</code>, which can be placed before paragraphs which would otherwise render alongside floated elements on mobile.}}
+
This template inserts an <code>inline-block</code> spacer {{tag|div}} with <code>height: 0px</code> and default <code>min-width: 15em</code>, which can be placed before paragraphs which would otherwise render alongside floated elements on mobile.
 +
 
 +
The <code>min-width</code> of the spacer can be adjusted with the parameter '''{{para|width|<var>css_length</var>}}''' (or '''{{para|w}}''' for short). The parameter accepts any valid CSS length expression, with units. (<code>100px</code>, <code>10em</code>, <code>15rem</code>, <code>16pt</code>, <code>80vw</code>,<ref><code>vw</code> and other viewport units [https://caniuse.com/#feat=viewport-units are still not well-supported], their use would likely cause problems.</ref> etc.)
 +
 
 +
For example:
 +
* {{tlx|spacer|w{{=}}8em}} will insert a narrower spacer
 +
* {{tlx|spacer|width{{=}}40em}} will act like {{tlx|clear}} on most screens
 +
 
 +
====Notes====
 +
<references/>
 +
}}
 
[[Category:Templates|{{PAGENAME}}]]
 
[[Category:Templates|{{PAGENAME}}]]
 
[[Category:Formatting templates|{{PAGENAME}}]]
 
[[Category:Formatting templates|{{PAGENAME}}]]
 
</noinclude>
 
</noinclude>

Latest revision as of 02:06, 3 April 2019

📚 Documentation

This template inserts an inline-block spacer <div>...</div> with height: 0px and default min-width: 15em, which can be placed before paragraphs which would otherwise render alongside floated elements on mobile.

The min-width of the spacer can be adjusted with the parameter |width=css_length (or |w= for short). The parameter accepts any valid CSS length expression, with units. (100px, 10em, 15rem, 16pt, 80vw,[1] etc.)

For example:

  • {{spacer|w=8em}} will insert a narrower spacer
  • {{spacer|width=40em}} will act like {{clear}} on most screens

Notes

  1. vw and other viewport units are still not well-supported, their use would likely cause problems.