Template:Inline Box

SummaryEdit

Historically, HTML tables have been used for purposes other than the display of tabular data (eg. page layouts). In particular, invisible tables have been employed to arrange content side-by-side and/or in columns. This approach has been effective for as long as the browser window is wide enough to show all the content.

However, mobile browsers and the UESP app have narrower displays; forcing a side-by-side layout "squeezed" the tables' contents into narrow columns, compromising its readability. Even worse, if the tables' contents cannot be squeezed (eg. long non-wrapping text), the user is forced to scroll horizontally, compromising both readability AND user experience.

This template is an attempt to ensure side-by-side content (eg. divs / tables) remain readable, even on narrower displays, by stacking them top of each other.

ParametersEdit

Inline Box

Parameter	Scope	Description
1	required	The content to be displayed side-by-side.
count	optional	Specifies the maximum number of side-by-side content; can support up to eight "columns".
display	optional	The CSS display property. Defaults to inline-block if omitted. Overrides display if defined in the style parameter. Use inline-table if the content is an HTML table.
min_width	optional	The smallest width the content can be "squeezed" into. Defaults to 24em, if omitted. Overrides min-width if defined in the style parameter. Narrower window sizes will make the content stack on top of each other.
style	optional	Any additional CSS styles to be applied.
width	optional	Specifies the target width for the content. If omitted, auto-calculated from count. If both this and count are omitted, defaults to 100%. Overrides width if defined in the style parameter.

ExamplesEdit

• If you're viewing this on a normal web browser, see what happens when you resize the window to a narrower width.
• Alternatively, you can view the mobile web version of this page.

Four "Columns"Edit

{{Inline Box|count=4|Lorem ipsum…}}
{{Inline Box|count=4|Lorem ipsum…}}
{{Inline Box|count=4|Lorem ipsum…}}
{{Inline Box|count=4|style=border:#000 1px dotted|Lorem ipsum…}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Inline Boxes with Table ContentEdit

• Tables don't parse correctly inside {{Inline Box}}. If the content has one or more tables use {{Inline Box/Start}} and {{Inline Box/End}} instead.

{{Inline Box|count=3|'''The quick brown fox…'''}}
{{Inline Box|count=3|Lorem ipsum…}}
{{Inline Box/Start|count=3}}
{|class=wikitable style=width:100%
!Spell Name!!Level!!Cost!!Effects
|-
|Protect||Novice||10||Shield 5% for 30sec on Self
|}
{{Inline Box/End}}

The quick brown fox jumps over the lazy dog.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Spell Name	Level	Cost	Effects
Protect	Novice	10	Shield 5% for 30sec on Self

Invisible TableEdit

• This is the previous implementation, which has only been included here for comparison.

The quick brown fox jumps over the lazy dog.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Spell Name Level Cost Effects Protect Novice 10 Shield 5% for 30sec on Self