Skip to main content

Horizontal scroll panel

Sometimes, content is simply too wide to be accommodated on smaller screens, with equations being a common example. This often results in the entire content scrolling right on mobile devices. The hscroll shortcode helps to prevent this by allowing horizontal scrolling within a defined area.

To use it, simply wrap the wide content with the shortcode. Here's an example of a wide equation:

\[ 1.99265\times10^{–23}\textrm{ g}\times6.02214\times10^{23}\textrm{ mol}^{–1}=12.0000\textrm{ g mol}^{–1} \]
[hscroll]
∖[ 1.99265\times10^{–23}\textrm{ g}\times6.02214\times10^{23}\textrm{ mol}^{–1}=12.0000\textrm{ g mol}^{–1} ∖]
[/hscroll]

Resize your browser window or view the content on a mobile device to test hscroll in action.

Tables can also be placed within this shortcode. It's a good idea to add a min-width style to the table itself to ensure the content doesn't appear too narrow.

Here's an example of a wide table with a min-width of large (992px) applied:

Verb Noun Definition Example
enforce enforcement implement;
action a legal requirement
The company is entitled to enforce the statutory contract.
contravene contravention any breach of the law The company has contravened a provision of the Corporations Act.
incorporate incorporation to create a body corporate The process of incorporating a company involves...
[hscroll]
<table class="table table-striped" class="min-width-lg">
Content here
</table>
[/hscroll]

Below are the various classes for minimum width that can be applied:

Class Min-width
min-width-xs 320px
min-width-sm 576px
min-width-md 768px
min-width-lg 992px
min-width-xl 1200px
min-width-xxl 2000px

Keywords